Convert multi-select to checkboxes

selects-to-checkboxes.js

const form = document.getElementById('form');

const multiSelects = [...form.querySelectorAll('select')]
  .filter(el => el.multiple);

function *indexedIteration(iterable) {
  let count = 0;
  for (const item of iterable) {
    yield [ item, count ];
    count++;
  }
}

const convertSelectBox = (select, uniqueSelectID = '0') => {
  select.hidden = true;

  const container = document.createElement('div');
  
  for (const [ option, index ] of indexedIteration(select.options)) {
    const checkboxContainer = document.createElement('div');

    const uniqueID = `${uniqueSelectID} ${index}`;

    const checkbox = document.createElement('input');
    checkbox.id = uniqueID;
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', (e) => {
      select.options[index].selected = e.target.checked;
    });

    const label = document.createElement('label');
    label.innerText = option.text;
    label.setAttribute('for', uniqueID);

    checkboxContainer.appendChild(checkbox);
    checkboxContainer.appendChild(label);

    container.appendChild(checkboxContainer);
  }

  select.parentNode.insertBefore(container, select);
};

for (const [ select, count ] of indexedIteration(multiSelects)) {
  convertSelectBox(select, count);
}