JSFiddle - React, Tailwind, and code Playground

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">
       <textarea id='output'></textarea>
    </div>
    <div class="fright">
        <button type="button" id='sortbykey' onclick='sortByKey()'>Sort by name</button>
        <button type="button" id='sortbyvalue' onclick='sortByValue()'>Sort by value</button>
    </div>
</div>

CSS

#my-text-box {
    font-size: 18px;
    height: 1.5em;
    width: 585px;
}
textarea{
    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))
        document.getElementById('output').textContent += nameValue + '\n';
    else
        alert('Incorrect Name Value pair format.');
}

document.getElementById('sortbykey').onclick = sortByKey;
function sortByKey() {
    var textarea = document.getElementById("output");
	textarea.value = textarea.value.split("\n").sort(function(a, b){
        if(a != "" && b != ""){
            return a.split('=')[0].localeCompare(b.split('=')[0])
        } else {
            return 0
        }
    }).join("\n");
}

document.getElementById('sortbyvalue').onclick = sortByValue;
function sortByValue() {
    var textarea = document.getElementById("output");
	textarea.value = textarea.value.split("\n").sort(function(a, b){
        if(a != "" && b != ""){
            return a.split('=')[1].localeCompare(b.split('=')[1])
        } else {
            return 0
        }
    }).join("\n");
}