JSFiddle - React, Tailwind, and code Playground

by Sergio Marron

HTML

<h3>Test</h3>
<label for="pair">Type your text</label></br>
<div class="form-section">
	<div class="fleft">
		<input type='text' id='my-text-box' value="Name=Value" />
	</div>
	<div class="fright">
		<button id='add' type="button">Add</button>
	</div>
</div>
</br>
</br>
</br>

<label for="pairs">Name/Value Pair List</label></br>
<div class="form-section">
    <div class="fleft">
        <select id="list" multiple></select>
    </div>
    <div class="fright">
        <button id="deleteButton" onclick="deleteEntry()">Delete</button>
        <button id="sortByValue">Sort By Value</button>
        <button id="sortByName">Sort By Name</button>
    </div>
</div>

CSS

#my-text-box {
    font-size: 18px;
    height: 1.5em;
    width: 585px;
}
#list{
    width:585px;
    height:300px;
}
.form-section{
    overflow:hidden;
    width:700px;
}
.fleft{float:left}
.fright{float:left; padding-left:15px;}
.fright button{display:block; margin-bottom:10px;}

JavaScript

document.getElementById('add').onclick = addtext;
function addtext() {
    var nameValue = document.getElementById('my-text-box').value;
      if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue)){
        var x = document.getElementById("list");
        
		var option = document.createElement("option");
		option.text = nameValue;
		x.add(option);
    }
    else
        alert('Incorrect Name Value pair format.');
}
document.getElementById('deleteButton').onclick = deleteEntry;
function deleteEntry(){
	var myList = document.getElementById('list');
  	var i;
  	for (i = myList.length - 1; i>=0; i--) {
    if (myList.options[i].selected) {
      myList.remove(i);
    }
  }
}

document.getElementById('sortByValue').onclick = sortByValue;
function sortByValue(){
	var myList = document.getElementById('list');
  	var values = new Array();
    for (var i=0;i<myList.options.length;i++) {
    	values[i] = myList.options[i].text;
    }
      values.sort(function(a, b){
            if(a != "" && b != ""){
                return a.split('=')[1].localeCompare(b.split('=')[1])
            } else {
                return 0
            }
   		});
    
   clearList(myList);
   fillList(myList, values);
}
document.getElementById('sortByName').onclick = sortByName;
function sortByName(){
	var myList = document.getElementById('list');
  	var values = new Array();
    for (var i=0;i<myList.options.length;i++) {
    	values[i] = myList.options[i].text;
    }
      values.sort(function (a, b){
            if(a != "" && b != ""){
                return a.split('=')[0].localeCompare(b.split('=')[0])
            } else {
                return 0
            }
   		});
    
    clearList(myList);
 
    fillList(myList, values);
}

function clearList(list) {
	while (list.options.length > 0) {
        list.options[0] = null;
    }
}

function fillList(myList, values){
	for (var i=0;i<values.length;i++) {
        var option = document.createElement("option");
		option.text = values[i];
       ...