JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<input id="product-quantity" value="0" />
<button id="change"> Change </button>
<div id="divParent"></div>

CSS

#divParent {
    width:250px;
    min-height:250px;
    border: 1px solid #ccc;
}

JavaScript

$(document).ready(function () {

    $('#change').on('click', function () {
        
        var input = $('#product-quantity').val() || 0;
        var children=$('#divParent > div').size() || 0;     
        
        if(input < children){
            $('#divParent').empty();
            children=0;
        }
        
        for (var i = children+1; i <= input; i++) {
            $('#divParent').append(
            $('<div/>')
                .attr("id", "newDiv" + i)
                .text("hello world " + i));
        }
       

    });
});