Change value of dynamically generated HTML with jQuery

I have a dropdown menu that looks like this:

<?php

while($set_va = mysqli_fetch_array($get_va)) {

?>
<div class="main-assign">
    <div class="assign-va" data-bs-toggle="dropdown">
        <div class="assign-btn">
            <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
                <div class='avatar-img-left'>
                    <img src='<?= ($set_va['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_va['picture'] ?>' 
                    class='me-2 rounded-circle avatar avatar-lg set-img'>
                </div>
                <div class='avatar-text-right' style="margin-top: 0">
                    <p class='avatar-name set-name' style="text-align: left">
                        <?= (empty($set_va) ? 'Unassigned' : $set_va['name']) ?>
                    </p>
                </div>
            </button>
        </div>
        <div class="assign-caret">
            <span>&#9660;</span>
        </div>
    </div>
    <div class="dropdown-menu">
        <div class="parent-employee">
            <?php while($set_emp = mysqli_fetch_array($get_emp)) { ?>

            <div class="employees" style="cursor: pointer">
                <div class='avatar-img-left'>
                    <img src='<?= ($set_emp['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_emp['picture'] ?>' 
                    class='me-2 rounded-circle avatar avatar-lg get-img' 
                    data-eimg="<?= ($set_emp['picture'] == NULL) ? 'uploads/emp_dp/koala.png' : 'uploads/emp_dp/'.$set_emp['picture'] ?>">
                </div>
                <div class='avatar-text-right'>
                    <p class='avatar-name get-name' 
                    data-ename="<?= $set_emp['name'] ?>">
                        <?= $set_emp['name'] ?>
                    </p>
                    <input type="hidden" name="mydata" class="mydata" value="" 
                    data-evalues="<?= $set_emp['id'].'#'.$set_task['id'] ?>">
                    
                    <input type="hidden" class="empid" id="empid" 
                    value="<?= $set_emp['id'] ?>">
                    <span class='avatar-desig'><?= $set_emp['designation'] ?></span>
                </div>
            </div>

            <?php } ?>

        </div>
    </div>
</div>

<?php } ?>

I want to change the image in the set-image class and the name in the set-name class with whatever options the user selects from the dropdown menu.

This is my jQuery code:

$(document).ready(function(e) {
    $(document).on('click', '.employees', function() {
        var img = $(this).find('.get-img').data('eimg');
        var name = $(this).find('.get-name').data('ename');
        var data = $(this).find('.mydata').data('evalues');

        $('.mydata').val(data);

        $('.set-img').attr('src', img);
        $('.set-name').text(name);
    });
});

Now, the problem is that, as you can see that the dropdown row main-assign itself is being generated using PHP from a MySQL table and when I am selecting a value from the dropdown menu dropdown-menu, all of the rows of the on the main-assign are getting changed.

I am not sure how to solve this problem. Any help would be highly appreciated!

Thanks so much!