JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<p>
    <input id="num" type="text" value="010" />
    <button id="build">Build boxes</button>
</p>
<div id="boxes"></div>

CSS

.box {
    border: solid 1px #999;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 1px;
    text-align: center;
    width: 30px;
}

JavaScript

jQuery(function($) {
    $('#build').click(function(event) {
        var numText = $('#num').val();
        var num = parseInt(numText);  // <- !!!
        
        $container = $('#boxes')
            .empty();
        for (var i = 0; i < num; i++) {
            $('<div />')
                .addClass('box')
                .text(i)
                .appendTo($container);
        }
    });
});