Display previously multi values selected in a searchable drop down when editing

Question

hi im using javascript to make a searchable and multi valued drop down list

i have a problem to display the previously selected values in the drop down list when im editing its blank regardless of its selected value as I have two tables table admin_profile which i keep record of users and table of current_jobs I'm fetching the username of the users to be displayed in a drop down list to be stored in table column designer_ca

would ideally want to display the previously selected value on the dropdown. As of now the drop down on the edit page just displays nothing and doesn't show the previously selected value. any help would be greatly appreciated.

this is my code

    <div  class="form-group ">
            <?php 
    $query ="SELECT user_name FROM admin_profile where user_role='Designer' or user_role='Checker' ";
    $result = $conn->query($query);
    if($result->num_rows> 0){
      $options= mysqli_fetch_all($result, MYSQLI_ASSOC);
    }
?>
            <label>Designer CA</label>
            <select class="form-control" multiple="multiple"  name="designer_ca[]" id="designer_ca" >       
  <?php 
  foreach ($options as $option) {
  ?>
    <option value="<?php echo $option['user_name']; ?>"  <?php if (!empty($designer_ca) && $designer_ca == $option['user_name']) echo "selected"; ?>   ><?php echo $option['user_name']; ?> </option>
    <?php 
    }
   ?>
</select>
            </div>

and im using implode to store the data

        'designer_ca'=> implode(",",$designer_ca)

js used

https://github.com/habibmhamadi/multi-select-tag/blob/main/dist/js/multi-select-tag.js

can someone please guide me?