title: Why do both ajax calls run when I submit a single input?
body: <p>I am dynamically generating two paragraphs and two input fields inside a div. There may be numerous divs generated, depending upon the number of records pulled from the database. Each para and input field is assigned a unique id. 
  When the user clicks on a field, say firstText_id, jQuery hides the field and shows an input field firstText_input_id in its place. The user updates the input field, and on clicking away, an ajax script is called to update the database and return a success message.
  My problem is that, when the user clicks on one field in any record, and updates it, then clicks away, the ajax calls for both fields are made.</p>
  
  <h1>PHP</h1>
  
  <pre><code>echo "&lt;div class=\"single seven columns boxTable2  \" id=\"{$vid}\"&gt;
          &lt;div class=\"seven columns alpha omega\" &gt;
          &lt;div class=\"four columns alpha omega\"  &gt;
             &lt;p class=\"single two columns alpha omega firstHead\"&gt;First name: &lt;/p&gt;
             &lt;p class=\"firstText single two columns alpha omega\" id=\"firstText_{$vid}\" 
                   data-vid=\"{$vid}\"&gt;{$first}&lt;/p&gt;
             &lt;input type=\"text\" id=\"firstText_input_{$vid}\"  
                   class=\"firstText_input single two columns\" 
                   data-vid=\"{$vid}\" value=\"{$first}\"/&gt;
               &lt;/div&gt;
  
              &lt;div class=\"four columns alpha omega\"  &gt;
           &lt;p class=\"single two columns alpha omega lastHead\" &gt;Last name: &lt;/p&gt; 
           &lt;p class=\"lastText single two columns alpha omega\" id=\"lastText_{$vid}\" 
                  data-vid=\"{$vid}\"&gt;{$last}&lt;/p&gt;
          &lt;input type=\"text\" id=\"lastText_input_{$vid}\"  
                class=\"lastText_input single two columns\" 
                data-vid=\"{$vid}\" value=\"{$last}\"/&gt;
             &lt;/div&gt;
  
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <h1>jquery</h1>
  
  <pre><code>jQuery.noConflict();
  jQuery(document).ready(function($){
  
      var vidID = '';
  
      $(document).on('click', '.firstText', function () 
      {
       vidID=$(this).data('vid');
           $('#firstText_'+vidID).hide();
           $('#firstText_input_'+vidID).show();
      }).change(function()
      {
          var newFirstText=$('#firstText_input_'+vidID).val();
          var firstTextDataString = 'vid='+ vidID +'&amp;first='+newFirstText;
  
          if(newFirstText.length&gt;0)
          {
              $.ajax({
                  type: "POST",
                  url: "/go/to/php.php",
                  data: firstTextDataString,
                  cache: false,
                  success: function(html)
                  {
                      $('#firstText_'+vidID).html(newFirstText);
                  }
              });
          } else
          {
              alert('Enter something.');
          }
      });
  
      // Edit input box click action 
      $('.firstText_input').mouseup(function(e) 
      {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();
          // return false; //(does the same as the above 3 functions)
      });
  
      // Click away action
      $(document).mouseup(function()
      {
          $('.firstText_input').hide();
          $('.firstText').show();
      });
  
  
      $(document).on('click', '.lastText', function ()
      {
           vidID=$(this).data('vid');
           $('#lastText_'+vidID).hide();
           $('#lastText_input_'+vidID).show();
      }).change(function()
      {
          var newLastText=$('#lastText_input_'+vidID).val();
          var lastTextDataString = 'vid='+ vidID +'&amp;last='+newLastText;
  
          if(newLastText.length&gt;0)
          {
              $.ajax({
                  type: "POST",
                  url: "/go/to/php.php",
                  data: lastTextDataString,
                  cache: false,
                  success: function(html)
                  {
                      $('#lastText_'+vidID).html(newLastText);
                  }
              });
          } else
          {
              alert('Enter something.');    
          } 
      });
  
      // Edit input box click action 
      $(".lastText_input").mouseup(function() 
      {
          return false;
      });
  
      // Click away action
      $(document).mouseup(function()
      {
           $(".lastText_input").hide();
           $(".lastText").show();
      });
  });
  </code></pre>
  
  <p>As the unique IDs are generated dynamically from the database records, I can’t find a way of associating the user’s click to the field being updated without the other field in the record being updated. I’m a relative beginner with jQuery/javascript. How can I isolate the user’s action to the field being clicked? I have tried click selectors like ‘[id^=”firstText_input_”]’. Probably a simple error, but I have been round it too many times to see the error.</p>