JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent"><!--
 --><span class="between"></span><!--
 --><span class="item"></span><!--
 --><span class="between"></span><!--
--></div>

CSS

div {
    background-color: #5555FF;
    padding-bottom: 20px;
}

.item {
    display: inline-block;
    background-color: #55FF55;
    width: 100px;
    height: 100px;
    margin-top: 20px;
}
.item:hover {
    background-color: #FFFF55;
}

.between {
    display: inline-block;
    width: 20px;
    height: 100px;
    margin-top: 20px;
}
.between:hover {
    background-color: #FF5555;
}

JavaScript

var parent = document.getElementById("parent");
parent.addEventListener("click", function(e) {
    if(e.target.classList.contains("between")) {
        var item = document.createElement("span");
        item.classList.add("item");
        var between = document.createElement("span");
        between.classList.add("between");
        e.target.parentNode.insertBefore(item, e.target);
        e.target.parentNode.insertBefore(between, item);
    }
});