自动填充输入表单数组

Question

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>";
}

Answer 1

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>";
}