Value on <input> Suddenly Change on Click/Focus

Question

This is simple script using jquery, my main problem is
Step 1: click row no 5

Step 2: click row no 3

Step 3: click on input

My question, why data change when I click on input? for your info in input I use custom maskedinput definition $.mask.definitions['~'] = '[-_A-Za-z0-9 ]';. Please help me figure it out. This is how I grab data from :

for(var i = 0; i < _field.length; i++){
  if(_field[i].type !== 'money')
     $formWrapper.find('input[name=' + _field[i].id + ']').val($data.find('td:eq(' + (i + 2) + ')').html());
  else
     $formWrapper.find('input[name=' + _field[i].id + ']').val($data.find('td:eq(' + (i + 2) + ')').html().replace(/,/g, ''));
}

Here JSFiddle Demo for your reference, any ideas?

Answer 1

Finally I can get in touch with maskedinput developer, a workaround is call blur() to remask it here

$('#step1').bind('click', function(){
    $('#i').val('').blur();
});

$('#step2').bind('click', function(){
    $('#i').val('1').blur();
});

$.mask.definitions['~'] = '[-_A-Za-z0-9 ]';
$('#i').mask('~?~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~', {placeholder: ""});