How can I make this JQuery and HTML, per-row specific?

by tomik23

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <div class="form-group">
        <select name="test" class="form-control">
          <option label="Please select" selected="selected" value="">Please select</option>
          <optgroup label="test1" style="font-weight: bolder;">
            <option label="1a" value="UserSubmit, free" disabled></option>
            <option label="1b" value="6"></option>
            <option label="1c" value="3"></option>
          </optgroup>
          <optgroup label="test2" style="font-weight: bolder;">
            <option label="2a" value="O24"></option>
            <option label="2b" value="O12"></option>
            <option label="2c" value="O6"></option>
            <option label="2d" value="O2"></option>
          </optgroup>
        </select>
      </div>
      <div class="modules">
        <div data-id="free">{loadmoduleid 240}</div>
        <div data-id="button">
          <input name="submit" type="submit" value="somevalue" id="submit-button" class="btn btn-primary UserSubmit" />
        </div>
        <div data-id="6">{loadmoduleid 234}</div>
        <div data-id="3">{loadmoduleid 235}</div>
        <div data-id="O24">{loadmoduleid 236}</div>
        <div data-id="O12">{loadmoduleid 237}</div>
        <div data-id="O6">{loadmoduleid 238}</div>
        <div data-id="O2">{loadmoduleid 239}</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <div class="form-group">
        <select name="test" class="form-control">
          <option label="Please select" selected="selected" value="">Please select</option>
          <optgroup label="test1" style="font-weight: bolder;">
            <option label="1a" value="UserSubmit, free"></option>
            <option label="1b" value="6"></option>
            <option label="1c" value="3"></option>
          </optgroup>
          <optgroup label="test2" style="font-weight: bolder;">
            <option...

CSS

.container {
  display: flex;
  padding: 20px;
  align-items: top;
  border: 1px solid red;
  gap: 30px;
}

.form-group {
  margin-bottom: 10px;
}

.modules>* {
  display: none;
}

.hidden {
  display: none;
}

[disabled] {
  background: #d0d7de;
  color: gray;
}

JavaScript

const selectElement = document.querySelectorAll('select');

selectElement.forEach(select => {

  const modules = select.parentNode.nextElementSibling;

  // show selected element
  select.addEventListener('change', function() {
    const indexSelected = this.selectedIndex;
    const indexValue = this.value;

    // show selected element
    [].slice.call(modules.children).forEach((child, index) => {
      child.style.display = child.dataset.id === indexValue ? 'block' : 'none';

      // if selected element is 1 then show
      // first and second element
      if (indexSelected === 1 && (index === 0 || index === 1)) {
        child.style.display = 'block';
      }
    });
  });
});