JSFiddle - React, Tailwind, and code Playground

by theodin

HTML

<div id="parent">
    <div id="alpha" class="spacer">
        <span class="child">Alpha</span>
    </div>
    <div id="beta" class="spacer">
        <span class="child">Beta</span>
    </div>
    <div id="gamma" class="spacer">
        <span class="child">Gamma</span>
    </div>    
</div>

CSS

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

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

.spacer {
    float: left;
}
.child {
    margin-right: 10px;
    background-color: yellow;
}

JavaScript

$(".spacer").click(function(e) { 
    e.stopImmediatePropagation();
    $(".debug").removeClass("debug");
    $(this).toggleClass("debug");
    
    // Should be inserted at the click location
    $(this).append('<span class="child">New child</span>');
})