JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div id="parent">
    <span class="child">Alpha</span>
    <span class="child">Beta</span>
    <span class="child">Gamma</span>
</div>

CSS

.debug {
    background-color: red !important;
}

#parent {
    padding: 5px;
    background-color: green;
}

.child {
    margin: 5px;
    background-color: yellow;
}

JavaScript

$('.child').on('click', function(e) { 
    e.stopImmediatePropagation();
    $(".debug").removeClass("debug");
    $(this).toggleClass("debug");
})

$("#parent").click(function(e) { 
    e.stopImmediatePropagation();
    $(".debug").removeClass("debug");
    $(this).toggleClass("debug");
    
    // Get mouse position along x-axis
    var xPos = e.pageX,
        yPos = e.pageY;
    
    // Get x-axis offset of child
    // Return array of child elements that is to the left of mouseclick
    // and get the last child, append new element after it
    var $prevChild = $('.child').filter(function() {
        return ($(this).offset().left < xPos && $(this).offset().top < yPos)
    }),
        $content = $('<span class="child">New child</span>');
    
    if ($prevChild.length > 0) {
        $content.insertAfter($prevChild.last());
    } else {
        $(this).prepend($content);
    }
})