My Javascript only seems to work on my first entry in my Laravel foreach loop

I have a foreach loop running in Laravel that has a dropdown in it. The dropdown is supposed to inform people about the status of a certain survey (Sent, not sent, received, etc). The idea being that the status of a certain survey is just stored locally. So even after a page refresh, the status would be remembered.

@foreach($surveys as $sur)
   <tr>
      <td style="padding:5px 25px 0 0;"></td>
      <td style="padding:5px 25px 0 0;">
         <select id="myDynamicSelectBox">
            <option>None</option>
            <option>Not send</option>
            <option>Sent</option>
            <option>Answer received</option>
         </select>
      </td>
@endforeach

My JavaScript looks like this:

const mySel = document.getElementById("myDynamicSelectBox");
mySel.addEventListener("change",function() {
  localStorage.setItem("selValue",this.value); // save it
});
let val = localStorage.getItem("selValue");
if (val) mySel.value=val; // set the dropdown
// trigger the change in case there are other events on the select
mySel.onchange(); 
</script>

So the problem that I'm facing, is that it does save the status of the first survey in the foreach loop. But for some reason the other surveys can't hold the values. Any ideas?

Thanks for your time,

Cheers,

via Chebli Mohamed