Why can't I populate appended select in php?-CodePudding

clientAdd.php

 <?php 

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

                    ?>

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

<script>
 $('#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);
            }
        });
    });
</script>

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  id="clientAddWage">
 <label for="formGroupExampleInput"> Position Title </label>
        <div  style="transition: ease 0.4s !important; margin-bottom: 23px;">
            <select  name="posiDDEarn" id="posiDDEarn" onchange="getId(this.value)">
            <option value=""></option>
             </select>
        </div>  
</div>

 <button type="button"  style="width: 100% !important; margin-top: 6% !important" onclick="clientAddWage()" id="AddPosition"> Add Earning </button>
 
<script>
 function clientAddWage() {
      $("#clientAddWage").append(   
        `<div id="newWage"> <label for="formGroupExampleInput"> Position Title </label>
        <div  style="transition: ease 0.4s !important; margin-bottom: 23px;">
           <select  name="poSI" id="poSI" onchange="getId(this.value)">
            <option value=""></option>
             </select> 
 );
      wageIndex  ;
    }
</script>

Output OUTPUT/THE PROBLEM

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!

CodePudding user response：

If you add two or more positions and change the office, it only populates the first one. Why? Well you keep adding elements with the same ID "poSI"...but it's an ID. What is the important thing about an ID? Of course, as I'm sure you know, it must uniquely identify something. So if you create multiple elements with the same ID, clearly it breaks that simple rule.

So when you then execute $('#poSI').html(result); Javascript will only recognise the first element it finds with that ID. The others are rule-breakers, so they're ignored. The solution? Use a class instead as your selector:

<select  name="poSI" onchange="getId(this.value)">

and

$('.poSI').html(result);