[FIXED] How is the data in the second form sent to the table?

Issue

I want to send the data in more than one form to the table. I need help. My main goal is: I want to choose from the table containing SQL database data. Making a new table with row data ajax from the table on the screen

Sorry for the grammar.

$(document).ready(function() {
  var id = 1;
  $("#butsend,#butsend2").click(function() {
    var newid = id++;
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\
<td width="100px" class="sname' + newid + '">' + $("#sname").val() + '</td>\n\ </tr>');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div style="margin: auto;width: 60%;">
  <form id="form1" name="form1" method="post">
    <div class="form-group">
      Name:
      <input type="text" name="name" class="form-control" id="name">
    </div>
    <div class="form-group">
      Surname:
      <input type="text" name="sname" class="form-control" id="sname">
    </div>
    <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
  </form>

  <form id="form2" name="form2" method="post">
    <div class="form-group">
      Name2:
      <input type="text" name="name2" class="form-control" id="name2">
    </div>
    <div class="form-group">
      Surname2:
      <input type="text" name="sname2" class="form-control" id="sname2">
    </div>
    <input type="button" name="send2" class="btn btn-primary" value="add data2" id="butsend2">
  </form>


  <table id="table1" name="table1" class="table table-bordered">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Surname</th>
        <tr>
    </tbody>
  </table>

jsfiddle.net

Solution

Give the input fields the same classes in both forms. Then you can get the current form of the button, and find the appropriate inputs.

$(document).ready(function() {
  var id = 1;
  $("#butsend,#butsend2").click(function() {
    var newid = id++;
    let form = $(this).closest("form");
    let name = form.find(".name").val();
    let sname = form.find(".sname").val();
    $("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name' + newid + '">' + name + '</td>\n\
<td width="100px" class="sname' + newid + '">' + sname + '</td>\n\ </tr>');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div style="margin: auto;width: 60%;">
  <form id="form1" name="form1" method="post">
    <div class="form-group">
      Name:
      <input type="text" name="name" class="form-control name" id="name">
    </div>
    <div class="form-group">
      Surname:
      <input type="text" name="sname" class="form-control sname" id="sname">
    </div>
    <input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
  </form>

  <form id="form2" name="form2" method="post">
    <div class="form-group">
      Name2:
      <input type="text" name="name2" class="form-control name" id="name2">
    </div>
    <div class="form-group">
      Surname2:
      <input type="text" name="sname2" class="form-control sname" id="sname2">
    </div>
    <input type="button" name="send2" class="btn btn-primary" value="add data2" id="butsend2">
  </form>


  <table id="table1" name="table1" class="table table-bordered">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Surname</th>
        <tr>
    </tbody>
  </table>
</div>

Answered By - Barmar

Answer Checked By - Mildred Charles (PHPFixing Admin)