JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<form id="myForm" class="myForm" action="" method="post"> 
<table>
<tbody>
<tr id="mytable1">
 <td>
           my table 1
              </td>
</tr>  </tbody>
          </table>
          <button type="submit" name="submit3">Submit
  
</button>
</form>
<form id="myForm" class="myForm" action="" method="post"> 
<table>
<tbody>
<tr id="mytable2">
 <td>
   my table 2
  
              </td>
</tr>  </tbody>
          </table>
                 <button type="submit" name="submit3">Submit
  
</button>
</form>
          <form id="myForm" class="myForm" action="" method="post"> 
<table>
<tbody>
<tr id="mytable3">
 <td>
      my table 3
  
              </td>
</tr>  </tbody>
          </table>
                 <button type="submit" name="submit3">Submit
  
</button>
</form>

JavaScript

$(document).ready(function() {
 $('.myForm').submit(function(e) {
var data = $(this).find('tr').attr('id')
                alert ('you clicked'+data);
   
e.preventDefault();

        });

    });
    
    $(document).ready(function() {
  $('.myForm').submit(function(e) {
  //find the unique table row
  var data = $(this).find('tr').attr('id')
                        e.preventDefault();

         $.ajax({
                url: 'add_tag.php',
                type: 'POST',
                dataType: 'html',
                data: $(this).serialize(),
               success: function(response) {

//Display the response in tr
$('#mytable'+data).prepend(response);
}
            });
 return false;
        });
 });