JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="panel-body">

  <div id="bridge_list_ssid_container" class="row form-group" style="display: block;">
    <label class="col-xs-5" for="bridge_list_ssid" id="bridge_list_ssid_label">SSID to Join:</label>
    <span class="col-xs-7">
      <select id="bridge_list_ssid" class="form-control" style="width:180px;max-width:180px" onchange="setSsidVisibility(this.id)">

        <option value="0">Vodafone-B524 (WPA2, 53% Signal)</option>
        <option value="1">Vodafone-B0FC (WPA2, 51% Signal)</option>
        <option value="2">FRITZ!Box 7530 AU (WPA2, 50% Signal)</option>
        <option value="3">FRITZ!Box 7430 HA (WPA2, 49% Signal)</option>
        <option value="4">FRITZ!Box 6660 Cable UO (WPA2, 46% Signal)</option>
        <option value="5">FRITZ!Box 7530 TA (WPA2, 46% Signal)</option>
        <option value="6">Vodafone-2654 (WPA2, 44% Signal)</option>
        <option value="7">o2-WLAN72 (WPA2, 41% Signal)</option>
        <option value="8">WLAN-957672 (WPA2, 40% Signal)</option>
        <option value="9">Vodafone-8D5C (WPA2, 40% Signal)</option>
        <option value="10">Raumfeld 3485 (WPA2, 37% Signal)</option>
        <option value="11">FRITZ!Box 7412 (WPA2, 37% Signal)</option>
        <option value="12">FRITZ!Box Gastzugang (Open, 37% Signal)</option>
        <option value="13">FRITZ!Box 7520 CC (WPA2, 37% Signal)</option>
        <option value="14">FRITZ!Box 6591 Cable LO (WPA2, 36% Signal)</option>
        <option value="15">Vodafone-590C (WPA2, 36% Signal)</option>
        <option value="16">FRITZ!Box 6591 Cable RO.o (WPA2, 36% Signal)</option>
        <option value="17">rtr016-022 (WPA2, 34% Signal)</option>
        <option value="18">WLAN-F7X5BU (WPA2, 34% Signal)</option>
        <option value="19">FRITZ!Box 7530 TF (WPA2, 33% Signal)</option>
        <option value="20">DIRECT-zPCX625-0019 (WPA2, 33% Signal)</option>
        <option value="21">Vodafone Hotspot (Open, 31% Signal)</option>
        <option value="22">FRITZ!Box 6660 Cable ME...

JavaScript

(function() {
    'use strict';
    // Your code here...

const bridge_list_ssid_container = document.querySelector("#bridge_list_ssid_container");
const bridge_list_ssid_select = document.querySelector("#bridge_list_ssid");
const bridge_list_ssid_container_options = document.querySelectorAll("#bridge_list_ssid_container option");

const newDiv = document.createElement('div');
bridge_list_ssid_container.after(newDiv);

function load_ssid_list() {

  const ssidList = document.createElement('ul');
  bridge_list_ssid_container_options.forEach((option, index) => {
    const listItem = document.createElement('li');
    listItem.textContent = option.textContent;

    const button = document.createElement('button');
    button.textContent = 'Select';
    button.addEventListener('click', () => {
      bridge_list_ssid_select.value = option.value;
    });

    listItem.appendChild(button);
    ssidList.appendChild(listItem);
  });
  newDiv.appendChild(ssidList);

};

bridge_list_ssid_select.addEventListener('change', () => {
	load_ssid_list();
});



})();