JSFiddle - React, Tailwind, and code Playground

HTML

<label for="total">Total:</label><input id="total" value="0"><button id="set_t">Init</button><button id="gen_t">Generate</button>
<div id="edit_p" class="box_g box_bold_g">
    <div class="unit_g box_g base_g">
        <div class="input_g box_g">
            <input size="3"> </input>
        </div>
        <div class="result_g box_g">
        </div>
    </div>
</div>

CSS

.box_g {border:1px solid black;}
.result_g {height: 50px;width:100%;}
.unit_g { width:50px; height: 100px;float:left;}
.input_g {padding: 0 2px;}
.box_bold_g {border-width: 3px;}
.moc_g {width: 30px; height:30px; background:yellow}

JavaScript

$(function(){
    var oMoc = "<div class='moc_g box_g'></div>";
    $("#set_t").click(function(){
    	var nTotal=$("#total").val();
        //console.log(nTotal);
        console.log($("#edit_p .unit_g").not(".base_g").length);
        //console.log($("#edit_p .unit_g").not(".base_g").length);
        if ($("#edit_p .unit_g").not(".base_g").length) {
        	$("#edit_p .unit_g").not(".base_g").remove();
        };
        for (i=1; i< nTotal; i++){            
            $(".base_g").clone().removeClass("base_g").appendTo( "#edit_p" );
        };
    });
    $("#gen_t").click(function(){
    	$(".unit_g").each(function(index){
            $(this).find(".result_g").empty();
            for (i=1; i <= $(this).find("input").val(); i++){
            	$(this).find(".result_g").append($(oMoc));
            }
        });
    });
})