Dependent drop down list not working with dynamic generated rows of the forms

Finally i able to display data in my required autofill fill forms on the basis of dependent drop down lists. Its working very fine when I have to use IDs (which worked with static rows of the form) . Now in final part of the problem I am stuck at point where I have to generate autofill values with dynamic generated rows. on the basis of dependent list. ( autofill part of the script already handling dynamic rows as i am successfully using classes there. But with dependent list script, i have an issue, Its not working. Below is my code.

                 <table class="table table-bordered">
                <thead class="table-success" style="background-color: #3fbbc0;">
                  <tr>
        <th width="15%"><center>Type</th> 
                    <th width="15%"><center>Service</th> 
                    <th width="15%"><center>Machine</th>                   
        <th width="5%"><center>Qty</th>                       
        <th width="10%"><center>Rate</th>
        <th width="5%"></th>                                               
                     <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add                Item</button>                         
                    </th>
                      </tr>
                </thead>
                <tbody id="TBody">
                  <tr id="TRow" class="d-none">

                   <td><Select  class="country form-control text-end" name="country[]" id = "country" >
                  <option value=""> Select Type</option>
            <?php
            include('db1.php');
            $query = "select * from country";
            // $query = mysqli_query($con, $qr);
            $result = $con->query($query);
            if ($result->num_rows > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
            ?>
            <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
            <?php
                }
            }     ?>    </select> </td>

            <td><Select  class="state form-control text-end" name="state[]" id = "state">
            <option value="">select Service</option></select></td>

                          onchange="GetDetail(this.closest('tr'))">
         <option value="">Select Machine</option></select></td>



    <td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" onfocus="Calc(this);"></td>
<td><input type="text" class="price form-control text-end" name="price1[]" id="ddd"   onfocus="Calc(this);" ></td>

       <td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>

                  </tr>   </tbody> </table>~~~
Here is script part //autofill script which work fine with dynamic rows
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(row) {
  let str = row.querySelector(".city").value;
  console.log(str + ";");
  if (str.length == 0) {
    row.querySelector(".qty").value = "";
    row.querySelector(".price").value = "";

    return;
  } else {
    // Creates a new XMLHttpRequest object
    //var xmlhttp = new XMLHttpRequest();
    // xmlhttp.onreadystatechange = function () {
    // Defines a function to be called when
    // the readyState property changes
    //if (this.readyState == 4 && this.status == 200) {
    // Typical action to be performed
    // when the document is ready
    var myObj = JSON.parse(fakeAjax2(str));

    // Returns the response data as a
    // string and store this array in
    // a variable assign the value
    // received to first name input field

    row.querySelector(".qty").value = myObj[0];
    row.querySelector(".price").value = myObj[1];
    //}
    //};

    // xhttp.open("GET", "filename", true);
    //xmlhttp.open("GET", "gfg.php?user_id=" + str, true);

    // Sends the request to the server
    //xmlhttp.send();
  }
}
// dependent list script which is problematic part for me
$(document).ready(function() {
            $("#country").on('change', function() {
                var countryid = $(this).val();

                $.ajax({
                    method: "POST",
                    url: "response.php",
                    data: {
                        id: countryid
                    },
                    datatype: "html",
                    success: function(data) {
                        $("#state").html(data);
                        $("#city").html('<option value="">Select Machine</option');

                    }
                });
            });
            $("#state").on('change', function() {
                var stateid = $(this).val();
                $.ajax({
                    method: "POST",
                    url: "response.php",
                    data: {
                        sid: stateid
                    },
                    datatype: "html",
                    success: function(data) {
                        $("#city").html(data);

                    }

                });
            });
        });
</script> ~~~