makeSelect2Container function infrastructure

function makeSelect2Container(
  opts: Array<{ value: string; text: string }> = [],
): {
  container: HTMLElement;
  select: HTMLSelectElement;
} {
  const wrapper = document.createElement("div");
  wrapper.className = "some-field-wrapper";

  const select = document.createElement("select");
  select.className = "select2-hidden-accessible";
  select.name = "myField";
  select.id = "field-id";

  const empty = document.createElement("option");
  empty.value = "";
  empty.textContent = "Choose…";
  select.appendChild(empty);

  for (const o of opts) {
    const opt = document.createElement("option");
    opt.value = o.value;
    opt.textContent = o.text;
    select.appendChild(opt);
  }

  const container = document.createElement("span");
  container.className = "select2 select2-container";

  const selection = document.createElement("span");
  selection.className = "select2-selection";

  const rendered = document.createElement("span");
  rendered.className = "select2-selection__rendered";
  rendered.textContent = "Choose…";

  selection.appendChild(rendered);
  container.appendChild(selection);

  wrapper.appendChild(select);
  wrapper.appendChild(container);
  document.body.appendChild(wrapper);

  return { container, select };
}