JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<div id="product-1">
    <div class="size-field">
        <div id="size-label">s</div>
        <div class="number-input">
            <input id="Small" class="product-quantity" type="number" name="Small" min="0" value="0" max="9999" data-product-id="1"></input>
        </div>
    </div>
    <div id="size-label">m</div>
    <div class="number-input">
        <input id="Medium" class="product-quantity" type="number" name="Medium" min="0" max="9999" data-product-id="1" value="0"></input>
    </div>
    <div class="name-number-header">
         <h5>HEADER<h5></div>
    <div class="name-number-field-container" data-output-id="1" data-size="Small">small:
    </div>
        <div class="name-number-field-container" data-output-id="1" data-size="Medium">medium:
    </div>
        </div>
    
    <br clear="all">
    
    <div id="product-2">    
<div class="size-field">
        <div id="size-label">s</div>
    <div class="number-input">
        <input id="Small" class="product-quantity" type="number" name="Small" min="0" max="9999" data-product-id="2" value="0"></input>
    </div>
</div>
            <div id="size-label">m</div>
    <div class="number-input">
        <input id="Medium" class="product-quantity" type="number" name="Medium" min="0" max="9999" data-product-id="2" value="0"></input>
    </div>
    <br clear="all">
    
<div class="name-number-header"><h5>HEADER<h5></div>
    <div class="name-number-field-container"  data-output-id="2" data-size="Small">small:
    </div>
        <div class="name-number-field-container"  data-output-id="2" data-size="Medium">medium:
    </div>
        </div>

CSS

.name-number-field {
    margin-bottom:15px;
    height: 10px;
    width:50px;
}
#product-2, #product-1 {
    width:200px;
    border:1px solid grey;
    margin:10px;
    padding:5px;
}
#size-label {
    float:left;
}
.name-number-field-container {
    display:none
}

JavaScript

$('.product-quantity').each(function () {
        $(this).data('val', this.value);
    }).on('change', function () {
        var val = $(this).val(),
            old = $(this).data('val')
            for (var count = 0; count < Math.abs(val - old); count++) {
                var input = $('<div/>', {
                    'class': 'name-number-field'
                }).html('<input class="name-field" name="name" placeholder="Name" type="text">'),
                    ele = $(this).closest('[id^="product"]').find('[data-size="' + this.name + '"]'),
                    inc = val >= old;

                if (inc) {
                    $(input).insertAfter(ele.nextUntil(':not(.name-number-field)').last().length ? ele.nextUntil(':not(.name-number-field)').last() : ele);
                } else {
                    ele.nextUntil(':not(.name-number-field)').last().remove();
                }
            }
        $(this).data('val', this.value);
    });




    $('.product-quantity').on('change', function () {
        if ($(this).val() >= 1) {
            $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").show();
        } else {
            $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").hide();
        }
    });