自动填充输入表单数组

the code below will auto fill 2 input form based in from another input.. right now its working but only for the first loop..its not working on second and third loop

..i know we have to use something like array but im not sure how to do this..

 <script>
   $(document).ready(function() {
    $('#totalofservices').keyup(function(){
       $("#totalontarget").val($(this).val());
    $("#totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

No need a array .Try with class Name instead of id .because the whole document id is unique .Closest() it will target the tr .find() use to find the children

<script>
   $(document).ready(function() {
    $('.totalofservices').keyup(function(){
       $(this).closest('tr').find(".totalontarget").val($(this).val());
    $(this).closest('tr').find(".totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control totalontarget' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control totalofftarget' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

Firstly, id must be unique and to achieve this use class instead of id Secondly, if you want to use those inputs at server side then make array of input fields like,

$(document).ready(function() {
  $('.totalofservices').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalontarget").val($(this).val());
    tr.find(".totalofftarget").val("0");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Zone 1</td>
    <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20'  name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20'  name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 2</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 3</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
</table>

</div>