JSFiddle - React, Tailwind, and code Playground

HTML

<div class='teststyles'>
    
<h3>Test</h3>
Name/Value Pair
    <br />
    <input id="PairTextbox" type="text" />=<input id="PairTextbox1" type="text" />
    <input type="button" value="Add" id="addButton" />
    <br />
    <br />Name/Value Pair List
    <br />
    <select multiple="multiple" id="PairListbox"></select>
    <input type="button" value="Sort By Name" sort-type="0" id="sortName">
    <input type="button" value="Sort By Value" sort-type="1" id="sortValue"><br>
    <input type="button" value="Delete" id="deleteButton" />

CSS

body {
    font-family: arial;
    font-size: 14px;
}
.teststyles {
    padding: 1em;
    background-color: #EDEDED;
    border: 1px solid #CCC;
    max-width: 100%;
}
.teststyles input {
    font-family: Arial;
}
.teststyles b {
    font-weight: bold;
}
.teststyles p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}
.teststyles select[multiple] {
    width: 80%;
    height: 8em;
}

.teststyles input#PairTextBox {
    width: 80%
}

.teststyles h2 {
    margin-top: 0.4em;
}

JavaScript

var listArray = [];

function addNewItem() {
    console.log("ok2");
    var textbox = document.getElementById('PairTextbox');
    var textbox1 = document.getElementById('PairTextbox1');
    var listbox = document.getElementById('PairListbox');
    var newOption = document.createElement('option');
    newOption.value = listArray.length-1; // The value that this option will have
    newOption.innerHTML = textbox.value + "=" + textbox1.value; // The displayed text inside of the <option> tags
    listbox.appendChild(newOption);
    listArray.push([textbox.value + "=" +textbox1.value, textbox1.value, ]);
    
}

function deleteItem() {
    var listbox = document.getElementById('PairListbox');
    if (listbox.selectedIndex != -1) {
        console.log(listbox.selectedIndex);
        delete listArray[listbox.value];
        listbox.remove(listbox.selectedIndex);
    }
}

function sortItems(e) {
    var sorttype = e.target.getAttribute("sort-type");
    var $listbox = document.getElementById('PairListbox');
    var $options = listArray.map(function (option) {
        return option;
    });;
    $options.sort(function (a, b) {
        var an = a[sorttype],
            bn = b[sorttype];

        if (an > bn) {
            return 1;
        }
        if (an < bn) {
            return -1;
        }
        return 0;
    });
    $listbox.innerHTML = "";
    
    var i = 0;
    $options.forEach(function ($option) {
        var newOption = document.createElement('option');
        newOption.value = i; // The value that this option will have
        newOption.innerHTML = $option[0]; // The displayed text inside of the
        $listbox.appendChild(newOption);
        i++;
    });
}

document.getElementById('addButton').addEventListener('click', addNewItem);
document.getElementById('sortName').addEventListener('click', sortItems);
document.getElementById('sortValue').addEventListener('click', sortItems);
document.getElementById('deleteButton').addEventListener('click', deleteItem);