I have two dropdowns which I want to fill from the same array which is passed to a function like this

html

<button onclick="popu(<%= JSON.stringify(coun) %>);">blue</button>

<form>
<fieldset>

    <select id="selectNumber" class="selectpicker1" name="selectpicker1">
      <option>Choose a number</option>
    </select>

    <select id="selectNumber2" class="selectpicker2" name="selectpicker2">
      <option>Choose a number</option>
    </select>
    
  <input type="submit" id="submit-form" />
  </fieldset>

popu.js function

function popu(coun) {
    var select = document.getElementById("selectNumber");
    var select2 = document.getElementById("selectNumber2");

    for(var i = 0; i < coun.length; i++) {
        var opt = coun[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
        select2.appendChild(el);
    }
   
}

But only one drop-down is getting filled.

So, I came across a jquery answer but I don't know jquery yet, and made this which also doesn't work

$(function popu(coll) {
    var elements = $('[id^="selectNumber"]');
    
    $.each(elements, function(index, value){
        var select = document.getElementById(elements[index]);

        for(var i = 0; i < coun.length; i++) {
            var opt = coun[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
          //  select2.appendChild(el);
        }
     });         
 });