title: Updating rows that are added dynamically using ajax
body: <p>I hope I can explain my issue clearly. </p>
  
  <p>I am running a function to get values from a database using ajax, and adding each result as a row in a table. This is so the user can delete or edit any row they want. I'm adding IDs dynamically to the columns and also the edit and delete buttons which are generated. So it looks like this:
  <a href="https://i.stack.imgur.com/i7pTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i7pTc.png" alt="enter image description here"></a></p>
  
  <p>My code:</p>
  
  <pre><code>function getstationdata(){
  var taildata1 = $('#tailnumber2').val();
  var uid = $('#uid').val();
  $.ajax({
      // give your form the method POST
      type: "POST",
      // give your action attribute the value ajaxadd.php
      url: "ajaxgetstationdata.php",
      data: {tailnumber:taildata1, uid:uid},
      dataType: 'json',
      cache: false,
  })
  .success(function(response) {
      // remove all errors
      $('input').removeClass('error').next('.errormessage').html('');
  
      // if there are no errors and there is a result
      if(!response.errors &amp;&amp; response.result) {
  
          var trHTML = '';
          $.each(response.result, function( index, value) {
          trHTML += '&lt;tr&gt;&lt;td&gt;&lt;input type="text" value="' + value[2] + '"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="weightinputclass"value="' + value[3] + '"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="arminputclass"value="' + value[4] + '"&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="momentinputclass" value="' + value[5] + '"&gt;&lt;/td&gt;&lt;td&gt;&lt;button id="updatecgbtn" onclick="updatecg()"class="editbuttonclass"&gt;Edit&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button id="deletecgbtn" class="deletebuttonclass""&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
  
         });
            $('#mbtbody').html('');
            $('#mbtbody').html(trHTML);
            var ID = 0;
            $('.weightinputclass').each(function() {
              ID++;
              $(this).attr('id', 'weightinputboxID'+ID);
              });
            var ID = 0;
            $('.arminputclass').each(function() {
              ID++;
              $(this).attr('id', 'arminputboxID'+ID);
              });               
          var ID = 0;
            $('.momentinputclass').each(function() {
              ID++;
              $(this).attr('id', 'momentinputboxID'+ID);
              });             
          var ID = 0;
            $('.editbuttonclass').each(function() {
              ID++;
              $(this).attr('id', 'editbutton'+ID);
              });             
              var ID = 0;
            $('.deletebuttonclass').each(function() {
              ID++;
              $(this).attr('id', 'deletebutton'+ID);
              });
      } else {
  
          // append the error to the form
          $.each(response.errors, function( index, value) {
              // add error classes
              $('input[name*='+index+']').addClass('error').after('&lt;div class="errormessage"&gt;'+value+'&lt;/div&gt;')
          });
  
      }
  });
  }
  </code></pre>
  
  <p>The code I have when adding the info is in a form and it looks like this:</p>
  
  <pre><code>$('#addstations').on('submit', function(e){
      e.preventDefault();
  
      $.ajax({
          type: $(this).attr('method'),
          url: $(this).attr('action'),
          data: $(this).serialize(),
          dataType: 'json',
          cache: false,
      })
      .success(function(response) {
          $('input').removeClass('error').next('.errormessage').html('');
          if(!response.errors &amp;&amp; response.result) {
              $.each(response.result, function( index, value) {
              chartdata4=(tailnumber3.value)
              });
          } else {
              // append the error to the form
              $.each(response.errors, function( index, value) {
                  // add error classes
                  $('input[name*='+index+']').addClass('error').after('&lt;div class="errormessage"&gt;'+value+'&lt;/div&gt;')
  
              });
          }
      });
  });
  </code></pre>
  
  <p>I searched a bit on the internet and found out that I can't add a form inside my table for each row which would have been easy to do and I can reuse my code which I use when adding new info. </p>
  
  <p>So, can someone please point me in the right direction?</p>