我可以创建一个下拉onchange函数来一张一张地更改多个表行中下拉列表的值吗

Question

我想更改第一次服务和活动选择的第一张表行下拉列表[client1]，并且当所有第一行都填满后重新加载服务和活动复选框，而第二行值在第二张表的下拉列表中更改[client2]更改第一行[client1]的值。

这是我的代码：

HTML

<select id="service" name="service" onchange="activityFromService()">
    <option value="">Select Service</option>
       <?php
           if($rowCount > 0){
             while($row = $query->fetch_assoc()){
               echo '<option selected="selected" value="'.$row['servicename'].'">'.$row['servicename'].'</option>';
             }
           }else{
             echo '<option value="">Service not available</option>';
           }
       ?>
</select>

<label>Name of activity :<span>*</span></label>

<br>

<select id="activity" name="activity" onchange="changevalueofclient()" style="width:100%">
</select>

<br>

<table id="parent" class="tdpadding">
    <thead>
        <tr>
            <th id="clientnm">Client Name</th>
        </tr>
    </thead>

    <!-- data coming in table content -->
    <tbody>
        <tr>
            <td>
              <select id="client1"  name="client" onchange="periodicityupdate(),partnername()" style="width:100%">
              </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="client2"  name="client" onchange="periodicityupdate(),partnername()" style="width:100%">
                </select>
            </td>
        </tr>
    </tbody>
</table>

Ajax

function activityFromService(){
  var service = $("#service").val();

  $.ajax({
    url : "./ajax/activityFromService.php",
    type : "POST",
    data : {service:service},
    success: function(data){

      $('#activity').html(data);
    }
  });
}


function changevalueofclient(){
  var service = $("#service").val();
  var activity = $("#activity").val();



  $.ajax({
    url : "./ajax/clientchange.php",
    type : "POST",
    data : {activity:activity,service:service},

    success: function(data){
      $("#client").html(data);
    }

  });




}  

我尝试为客户端下拉行创建动态ID，但失败了。