Traverse inside table rows

Question

I have a table with multiple table rows inside it, each td has an input inside it, i'm trying to traverse inside the table row so i can set the value of an input through another input, it only works for the first table row, how can i make for all the rows in the table? and i have a button that appends a tr when i apped a new tr it doesn't set the value inside it, here is my code:

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
             '<td><input type="text"></td>' +
             '<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
   <tr>
     <td><input type="text" class="myFirstInput"></td>
     <td><input type="text"></td>
     <td><input type="text" class="mySecondInput"></td>
   </tr>
  </tbody>
</table>

<button>Append row</button>

Answer 1

The problem is that you are using id's. By definition, id's should be unique. When your code runs, it only applies to the first item with that id that it finds. Simply changing your id's to class should do the trick (for that part).

Secondly, it looks like you are creating rows dynamically (adding tr's). run that same function whenever you insert new rows:

$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');

$('button').click(function () {
    var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
    $('tbody').append(tr);
    $('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>

<button>Append row</button>

Answer 2

Your issue is that you're using IDs, which must be unique in HTML. Change them to classes instead and this should work as expected.

function addVal() {
  var elems = $('.myFirstInput').closest('tr').find('.mySecondInput');
  $.each(elems, function(s, e) {
  if($(e).val() === '') {
      $(e).val('1000');
   }
  });
}

$(document).ready(function() {
$('button').click(function () {
			var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
			$('tbody').append(tr);
      addVal();
		});
    
    addVal();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
    <tr>
      <td><input type="text" class="myFirstInput"></td>
      <td><input type="text"></td>
      <td><input type="text" class="mySecondInput"></td>
    </tr>
  </tbody>
</table>

<button>Append row</button>