Why can’t I populate appended select in php?

clientAdd.php

                    $office = "SELECT * FROM tblOffice";
                    $office_qry = mysqli_query($conn, $office);

                    ?>

                       <div class="input-field"> 
                        <label> Office </label>
                    <select id="office-dd" name="office-dd">
                    <option disabled selected value>Select Office</option>
                        <?php while ($row = mysqli_fetch_assoc($office_qry)) : ?>
                            <option value="<?php echo $row['officeId']; ?>"> <?php echo $row['officeName']; ?> </option>
                            <?php endwhile; ?>
                    </select>
                        </div> 


<div class="clientAddPosi" id="clientAddPosi">
          <label for="formGroupExampleInput"> Position Title </label>
                <div class="form-group">
                    <input type="text" class="form-control" id="filterPosi" placeholder="Filter Positions" name="filterPosi" style=" transition: ease 0.4s;">
                      <select class="form-control" id="posi-dropdown" name="posi-dropdown" style="transition: ease 0.4s !important;" multiple="multiple">
                    </select>
                <hr>
                </div>
        </div>


 $('#office-dd').on('change', function() {
        var officeId = this.value;
        // console.log(country_id);
        $.ajax({
            url: '../Module - Client/fetch-position.php',
            type: "POST",
            data: {
                officeData: officeId
            },
            success: function(result) {
                $('#posi-dropdown').html(result);
                $('#posiDDEarn').html(result);
                $('#poSI').html(result);
            }
        });
    });

The #posi-dropdown, #posiDDEarn are all working fine since they are hardcoded in the other file (clientEarningsInsert.php) but when adding the select which is #poSI, it’s not working

clientEarningsInsert.php

        <div class="form-group" style="transition: ease 0.4s !important; margin-bottom: 23px;">
            <select class="form-control" name="posiDDEarn" id="posiDDEarn" onchange="getId(this.value)">
            <option value=""></option>
             </select>
        </div>  

 <button type="button" class="btn btn-primary btn-lg btn-block" style="width: 100% !important; margin-top: 6% !important" onclick="clientAddWage()" id="AddPosition"> Add Earning </button>
 

 function clientAddWage() {
      $("#clientAddWage").append(   
        `<div id="newWage"> <label for="formGroupExampleInput"> Position Title </label>
        <div class="form-group" style="transition: ease 0.4s !important; margin-bottom: 23px;">
           <select class="form-control" name="poSI" id="poSI" onchange="getId(this.value)">
            <option value=""></option>
             </select> 
 );
      wageIndex++;
    }

Output

enter image description here

I’m really sorry if the code is not clean/written well, I’m still a beginner and looking for ways to improve. Any help regarding this would be of great help to me. Thank you!