JSFiddle - React, Tailwind, and code Playground

by cgack

HTML

<div id="container0">
    <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
</div>
<div id="container1">
    <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
        <div class="ci"></div>
</div>
<button id="add">add</button>
 <button id="remove">remove</button>

CSS

.ci{height:1em;}
.ci_p{border: 1px solid black;}

JavaScript

$(document).ready(function() {
    $("#add").on("click", function() {
        var conts = $("[id^=container]");
        for (var k = 0; k < conts.length; k++) {
            var $cont = $(conts[k]),
                cis = $cont.children(".ci");
            for (var i = 0; i < cis.length; i++) {
                var idx = "ci_p_" + k + "_" + i;
                $cont.append("<div id='" + idx + "'></div>");
                $cont.children("#" + idx).append($(cis[i]).remove());
                $("#" + idx).addClass("ci_p");
            }
        }
    });
    $("#remove").on("click", function() {
        var conts = $("[id^=container]");
        for (var k = 0; k < conts.length; k++) {
            var $cont = $(conts[k]);
            $cont.children().children(".ci").clone(true).appendTo($cont).data(this.data);
            $cont.children(".ci_p").remove()
        }
    });
});