I have an html page in which I have a textbox (Type your text) and TextArea list. I need to type into the textbox and then click Add button so that whatever is there in textbox goes to my TextArea list. I need to type in this below format in the textbox.

```
Name=Value

```

This textbox will be used by the user to quickly add Name Value pairs to the list which is just below that textbox. let's say if we type `Hello=World` in the above textbox and click add, then in the below list, it should show as

```
Hello=World

```

And if we again type `ABC=PQR` in the same textbox, then in the below list, it should show like this so that means it should keep adding new Name Value pair just below its original entry.

```
Hello=World
ABC=PQR

```

But if the syntax is incorrect like if it is not in Name=Value pair then it should not add anything to the list and instead show a pop up that wrong input format. Names and Values can contain only alpha-numeric characters. I also have two more buttons `Sort by name` and `Sort by value`. Once I click either of these two buttons, then it should sort entries in TextArea list using either name or value. Now I have all above things working fine without any issues.

I have added another button called `Delete`. Basically, when the `Delete` button is pressed all selected items in the listbox should be deleted. How can I add this feature? I am not able to understand this.

Here is my [jsfiddle](https://jsfiddle.net/56hs2nmn/2/). I need to use plain HTML and Javascript, I don't want to use any library yet as I want to keep it simple as I am still learning.

Below is my code:

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>

<style type="text/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;}
</style>

<script language="javascript" type="text/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");
    }
</script>

</head>

<body>
    <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>

</body>
</html>

```