So I have this CRUD table that looks like this:

and when I click "Modifier", I want to display row data in all my inputs and select boxes in this

Wilaya and Commune means State and City, you can guess that I'm trying to display the selected values from a row table in these select options.

<select name="state" id="state" onchange="populate(this.id,'city')">
    <?php foreach($Wilaya as $wilaya){
        echo '<option value="'.$wilaya.'">'.$wilaya.'</option>';
    }?>
</select>

<select name="city" id="city">
    <option value="" disabled selected>-- Selectionner Commune --</option>
</select>

and populate function looks like this:

function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);

    s2.innerHTML = "";
    
    // here I have a bunch of if statement here one example
     if(s1.value == "Tindouf"){
        var optionArray = ['Oum el Assel','Tindouf',];
    }
     for(var option in optionArray){
       var data = optionArray[option];
       var newoption = document.createElement("option");
 
       newoption.value = data;
       newoption.innerHTML = data;
       s2.options.add(newoption);
    }
 };

this what the dropdown menu looks like after I click "Modifier" city select box.

So I do realize that populate function shows city options only when I change my selection, how can I display city options after data is loaded in the modal knowing that state value is already there but it doesn't show its cities.