(CLOSED) When button is clicked, How to Get input values in the 1st table row and display them in the newly added rows

Question

Now, when the ok button is clicked, additional rows will be added below the 1st table row. I'm wondering when the button is clicked,how to get the values from the 1st table row, and add those values to the row(s) newly added (possibly more than 1 row depends on how many row(s) user input.

Desired result

No  Tommy  Danvers
1   Tommy  Danvers
2   Tommy  Danvers
3   Tommy  Danvers

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = ` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]"></td>
      <td><input type="text" name="other[]"></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy"> </td>
    <td><input type="text" name="other[]" value="Danver"> </td>
  </tbody>
</table>

Answer 1

Here you go with the solution https://jsfiddle.net/r3rbkf72/1/

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    var name = $('table#one tbody td:eq(1) input[name="name[]"]').val();
    var other = $('table#one tbody td:eq(2) input[name="other[]"]').val();
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = `<tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]" value=${name}></td>
      <td><input type="text" name="other[]" value=${other}></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy"> </td>
    <td><input type="text" name="other[]" value="Danver"> </td>
  </tbody>
</table>

Below two lines of code I have added.

var name = $('table#one tbody td:eq(1) input[name="name[]"]').val();

var other = $('table#one tbody td:eq(2) input[name="other[]"]').val();

This will help you to receive the data from the top row textbox.

Answer 2

So i have found this will do what i need , it's likely there's gonna be better answer out there. If u have one, please do share. Thank you

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of row');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
    additionalRows = new Array(numNewRows);
    for (i = 0; i < numNewRows; i++) {
      additionalRows[i] = ` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" name="name[]" class="tommy"></td>
      <td><input type="text" name="other[]" class="danver"></td>
  	  </tr>`
      lastRowIndex = lastRowIndex + 1;
    }

    $tbody.append(additionalRows.join());
  }
});


$("#add-row").on('click', function() {
  var set = $('#tommy,#danver').val();
  if (set) {
   $('.tommy,.danver ').val(set);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">OK</button>


<table id="one">
  <tbody>
    <td>
      <input type="text" name="id[]" value="No"></td>
    <td><input type="text" name="name[]" value="Tommy" id="tommy"> </td>
    <td><input type="text" name="other[]" value="Danver" id="danver"> </td>
  </tbody>
</table>