Javascript : Modify several tags value onclick on the dselect dropdown menu

I have a select dropdown menu with values are number. I have another table list where there are buttons for each rows. Onclick on one of this buttons, it defines the value on the select dropdown. All that was working well this code :

<select name="client" class="select form-select" id="id_client"> 
<option value="1109">Charles</option> 
<option value="1108">Fred</option> 
<option value="1107">Lionel</option> 
<option value="1106">Robert</option> 
<option value="1105">Mike</option>
</select>

<button onclick="myFunc(this.id)" id="1109"> Select client</button>

<script type="text/javascript">

function myFunc(clicked_id){
        console.log(clicked_id);
        var s = document.getElementById('id_client');
        s.value = clicked_id;
        document.querySelector('#id_client').value = clicked_id;
    };
    
</script>

However I wanted to add a searchbar on this dropdown menu. So I just used a javascrip library : deselect. My function became half useless because it changes correctly the values send by the post method of the dropdown menu, but we actually do not see it on the display of the dropdown menu. I have investigated the new html that is generated by this library. Actually the display of the previous dropdown menu became styled by none and it added a new one.

Here is it :

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
    <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
      <div class="d-flex flex-column">
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
        <div class="dselect-items" style="max-height:360px;overflow:auto">
          <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div class="dselect-no-results d-none">No results found</div>
      </div>
    </div>
  </div>

There are few change to do, to change the display too on the dropdown menu :

1. deactivate the previous one by changing class="dropdown-item active" to class="dropdown-item"

2. activate the new one by changing class="dropdown-item" to class="dropdown-item active". To do that, it is necessary to find the data-dselect-value="id..." that matches with the id of the table, but I do not see how to do that since it is not a class or a id attribute.

3. On this tag, it is necessary to change the names to the one that has been selected.

   Charles

Anyone can help me, I am starting on Javascript and I do not get how to do it with the querySelector.

Thanks