Problem with jQuery Mobile dialog

Problem with jQuery Mobile dialog

I have a jQuery Mobile script which works but involves different dialog boxes for each time a numeric value is required from the user. So I tried to use one dialog box for all numeric values:

  1. <div data-role="dialog" id="dialogNum" data-theme="a">
  2. <div data-role="header"><h1>Decimal Coordinates</h1></div>
  3. <div data-role="content">
  4.       <p id="inputDesc"></p>
  5.       <input type="number" id="myNumber" data-mini="true" value="" />
  6.       <a href="#" data-rel="back" data-role="button">Enter</a>
  7. </div>
  8. </div>

This works for the first inputs in each input box but the problem is that when I input a second value to either of the input boxes it overwrites the contents both of the input boxes and not just the one selected. Can anyone tell me why it is writing to both input boxes?

  1. $('#locAlat').click(function () {
  2.         $.mobile.changePage('#dialogNum', 'pop', true, true);
  3.         $('#inputDesc').text('Enter latitude in decimal format:');
  4.         $('#myNumber').blur(function () {
  5.             var num = $('#myNumber').val();
  6.             $('#myNumber').reset;
  7.             $('#locAlat').val(num + "°");
  8.         });         
  9.     });
  10. $('#locAlon').click(function () {
  11.         $.mobile.changePage('#dialogNum', 'pop', true, true);
  12.         $('#inputDesc').text('Enter longitude in decimal format:');
  13.         $('#myNumber').blur(function () {
  14.             var num = $('#myNumber').val();
  15.             $('#myNumber').reset;
  16.             $('#locAlon').val(num + "°");
  17.         });         
  18.     });