JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <div id="add-item-div">
            <input type="text" name="add-item-text">
            <button id="add-item">Add Item</button>
        </div>
        <div id="item-list">
        </div>
        <div id="item-template" class="item-list-element" draggable="true" ondragstart="listItemDragStartHandler(event);" ondrop="dropHandler(event);" ondragover="dragoverHandler(event);">
            <div class="item-text"></div>
            <div class="delete-item-div">
                <button class="delete-item" onclick="delete_item(event);">Delete Item</button>
            </div>
        </div>
    </div>
</body>

CSS

#item-template {
    display: none
}

#add-item-div {
    background-color: orange;
    text-align: center;
    margin-bottom: 5px;
}

#item-list {
    text-align: center;
}

.item-list-element {
    background-color: lightgreen;
    display: block;
    margin: 5px;
}
.item-list-element .item-text {
    display: inline-block;
}
.item-list-element .delete-item-div {
    display: inline-block;
}

JavaScript

"use strict";

var source = null;

function listItemDragStartHandler(event){
    // What is true there for?
    source = event.currentTarget.cloneNode(true);
    event.dataTransfer.setData("text/plain", event.currentTarget.innerHTML);
    event.dataTransfer.effectAllowed = "move";
}

function dragoverHandler(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
}

function dropHandler(event) {
    event.preventDefault();
    event.stopPropagation();
    var currentElement = event.currentTarget;
    var listContainer = currentElement.parentNode;
    listContainer.insertBefore(source, currentElement);
}

function delete_item(event) {
    var currentTarget = event.currentTarget;
    var grandParentOfDelete = currentTarget.parentNode.parentNode;
    grandParentOfDelete.remove();
}

function add_item() {
    var item_text_node = document.getElementsByName("add-item-text")[0]
    var item_text = item_text_node.value;
    if (item_text.length > 0) {
        var item_template = document.getElementById("item-template");
        var item_clone = item_template.cloneNode(true);
        item_clone.removeAttribute("id");
        var clone_text = item_clone.getElementsByClassName("item-text")[0];
        clone_text.textContent = item_text;
        // reset the value
        item_text_node.value = "";
        var item_list = document.getElementById("item-list");
        item_list.appendChild(item_clone);
    } else {
        alert("No text?? Add some text!");
    }
}

function add_item_listener() {
    var add_item_button = document.getElementById("add-item");
    add_item_button.addEventListener("click", add_item);
}

function init_app() {
    add_item_listener();
}

window.onload = function () {
    init_app()
}