Opening modalwith multiple select Options

Hi I'm trying to open a modal with different Data (loaded from Django) from an Option.

<tbody>
          
          <tr>
            <td class="client">client001</td>
            <td class="User">user001</td>
            <td class="Vulnerabilites">
              <select class="form-select" size="4" id="vulselect"  >
                
                <option value="2705" >Security Vulnerability CVE-2018-1285 for log4net</option>
                
                <option value="73562" >Security Vulnerability CVE-2022-39427 in VirtualBox</option>
                
              </select>
            </td>
          </tr>
          
          <tr>
            <td class="client">client002</td>
            <td class="User">user002</td>
            <td class="Vulnerabilites">
              <select class="form-select" size="4" id="vulselect"  >
                
                <option value="68069" >Security Vulnerability CVE-2021-34803 for TeamViewer</option>
                
                <option value="74465" >Security Vulnerability CVE-2023-21899 in VirtualBox</option>
                
              </select>
            </td>
          </tr>
          
        </tbody>

<script>
$(function () {
    $(".form-select").each(function () {
        $(this).change(function () {
          var e = document.getElementById("vulselect");
          var value = e.value;
          alert(value);
          $('#vulmodal').modal("show");
          
          var elements = document.getElementById("vulselect").options;
          for(var i = 0; i < elements.length; i++){
            elements[i].selected = false;
          }
        });
    });
});

 </script>    

For my first select in the first table row (user001) the alert shows the correct Values. But when I try it in my second row the JS don't load the option value in the var value.

Sorry Im very new to frontend so any help would be greatly appriciated.

Your problem is that you have multiple elements with the exact same ID vulselect

An ID has to be unique on a page, there can only be one with that exact ID. You should probably use a class instead.

As far as your script goes, You select the .form-select element, and when it changes value to then re-selected the same element by ID vulselect - twice - you don't need to do this since you already have the element selected with $('.form-select')m you can just reference this inside of that function now!

You can really simplify this code too. See the below demo with both changes, but I had to comment out the modal since I don't have that here for this demo. You don't need to do an .each() and then a .change() inside of that. You can just call .change() at the top level and that code will apply to every element that matches the selector you gave it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function () {
  $(".form-select").change(function () {
    console.log(this.value);
    //$('#vulmodal').modal("show");

    for(var i = 0; i < this.options.length; i++){
      this.options[i].selected = false;
    }
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
  <tr>
    <td class="client">client001</td>
    <td class="User">user001</td>
    <td class="Vulnerabilites">
      <select class="form-select" size="4">
        <option value="2705" >Security Vulnerability CVE-2018-1285 for log4net</option>
        <option value="73562" >Security Vulnerability CVE-2022-39427 in VirtualBox</option>
      </select>
    </td>
  </tr>
  
  <tr>
    <td class="client">client002</td>
    <td class="User">user002</td>
    <td class="Vulnerabilites">
      <select class="form-select" size="4">
        <option value="68069" >Security Vulnerability CVE-2021-34803 for TeamViewer</option>
        <option value="74465" >Security Vulnerability CVE-2023-21899 in VirtualBox</option>
      </select>
    </td>
  </tr>
  
</tbody>
</table>

<!-- end snippet -->

The reason only the first one worked in your example is because you used document.getElementById which will only return the first match it finds. It does this because there should only be one element with that ID on a page anyway.