I want to run the Ajax function for each row separately. But with the given code the function is being run on both the rows even if I select category only on the first row.

the table will have new rows added and removed with a button, so can’t give the select different class.

This is the HTML with PHP within it.

<table  class="center" id="Cateogry">
      <tr>
        <th>Category</th>
        <th>Item</th>
      </tr>
      <tr>
        <td><div class="form-group">
                               <label for="CATEGORY-DROPDOWN">Category</label>
                               <select class="form-control category-dropdown">
                                  <option value="">Select Category</option>
                                  <?php
                                     require_once "../config.php";
                                     $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18");
                                     while($row = mysqli_fetch_array($result)) {
                                     ?>
                                  <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option>
                                  <?php
                                     }
                                     ?>
                               </select>
                            </div></td>
        <td style="width:30%">
        <div class="form-group">
            <label for="SUBCATEGORY">Sub Category</label>
            <select class="form-control sub-category-dropdown">
            </select>
         </div>
        </td>
      </tr>
    
    <tr>
        <th>Category</th>
        <th>Item</th>
      </tr>
      <tr>
        <td><div class="form-group">
                               <label for="CATEGORY-DROPDOWN">Category</label>
                               <select class="form-control category-dropdown">
                                  <option value="">Select Category</option>
                                  <?php
                                     require_once "../config.php";
                                     $result = mysqli_query($con,"SELECT * FROM menu_category where outlet_id = 18");
                                     while($row = mysqli_fetch_array($result)) {
                                     ?>
                                  <option value="<?php echo $row['category_id'];?>"><?php echo $row["category_name"];?></option>
                                  <?php
                                     }
                                     ?>
                               </select>
                            </div></td>
        <td style="width:30%">
        <div class="form-group">
            <label for="SUBCATEGORY">Sub Category</label>
            <select class="form-control sub-category-dropdown">
            </select>
         </div>
        </td>
      </tr>
    </table>

This is the Script

<script>
             $(document).ready(function() {
        $('.category-dropdown').on('change', function() {
            var category_id = this.value;
            $.ajax({
                url: "fetch-subcategory-by-category.php",
                type: "POST",
                data: {
                    category_id: category_id
                },
                cache: false,
                success: function(result) {
                    $(".sub-category-dropdown").html(result);
                }
            });
        });
    });
          </script>