JSFiddle - React, Tailwind, and code Playground

by Panomosh

HTML

<form class="boxForm">
    <input type="number" class="boxInput"/>
    <input type="submit" value="Submit"/>
</form>
<ul class="boxContainer">
    <li class="hide">
        <div class="box"></div>
    </li>
</ul>

CSS

.box {
    height: 100px;
    width: 100px;
    background-color: red;
    margin: 10px;
}
.hide {
    display: none;
}

JavaScript

$(function(){

    $('.boxForm').submit(function(e){
        e.preventDefault();
        var amount = $('.boxInput').val();
        for(i=0; i<amount; i++){
            var newBox = $('.hide').clone();
            newBox.removeClass('hide');
            newBox.appendTo('.boxContainer');
        }
    });

});