JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>apple</li>
</ul>
<ol id="myNewList"></ol>

CSS

#myList li {
    cursor:pointer;
    list-style-type:none;
    transition:all 0.2s linear;
}
#myList li:hover {
    color:#00BFFF;
    transition:all 0.2s linear;
}

JavaScript

var myArray = ['banana', 'something else', 'bingo', 'apple', 'noodle'];

$('#myList').on('click', 'li', function (event) {
    for (var i = 0; i < myArray.length; i++) {
        if (this.innerText == myArray[i]) {
            myArray = myArray.splice(i,1);
            appendToOrderedList(this);
            break;
        }
    }

    function appendToOrderedList(li) {
        var newList = document.querySelector('#myNewList');
        newList.innerHTML += '<li>' + li.innerText + '</li>';
        li.parentNode.removeChild(li);
    }
});