JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="js-filter-selects">
  <div id="js-filter-selects" class="filter__wrapper form-general">
    <div class="filter__col">
      <label for="market">Marknad</label>
      <select id="market" name="market" multiple="multiple" class="jqmsLoaded ms-list-1" style="display: none;">
        <option value="hus-och-tradgardsmiljoer">Hus- och trädgårdsmiljöer (12)</option>
        <option value="offentlig-miljo">Offentlig miljö (3)</option>
      </select>
      <div id="ms-list-1" class="ms-options-wrap ms-has-selections"><button type="button"><span>1 valda</span></button>
        <div class="ms-options" style="min-height: 200px; max-height: 1016px;">
          <ul style="column-gap: 0px;">
            <li data-search-term="hus- och trädgårdsmiljöer (12)" class="selected"><label for="ms-opt-1" class=""><input type="checkbox" title="Hus- och trädgårdsmiljöer (12)" id="ms-opt-1" value="hus-och-tradgardsmiljoer">Hus- och trädgårdsmiljöer (12)</label></li>
            <li data-search-term="offentlig miljö (3)"><label for="ms-opt-2"><input type="checkbox" title="Offentlig miljö (3)" id="ms-opt-2" value="offentlig-miljo">Offentlig miljö (3)</label></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="filter__col">
      <label for="assortment">Sortiment</label>
      <select id="assortment" name="assortment" multiple="multiple" class="jqmsLoaded ms-list-2" style="display: none;">
        <option value="lorem-1">Lorem 1</option>
        <option value="lorem-2">Lorem 2</option>
        <option value="lorem-3">Lorem 3</option>
        <option value="lorem-4">Lorem 4</option>
      </select>
      <div id="ms-list-2" class="ms-options-wrap"><button type="button"><span>Visa alla</span></button>
        <div class="ms-options" style="min-height: 200px; max-height: 899px;">
          <ul style="column-gap: 0px;">
            <li data-search-term="lorem 1"><label...

JavaScript

var data = document.querySelectorAll('#js-filter-selects-template select[multiple]')
const selects = document.querySelectorAll('#js-filter-selects select[multiple]')

const newData = [...data].reduce(function(arr, curr) {
arr.push(...curr.options)

  return arr
}, [])

console.log('newData:', newData)