JSFiddle - React, Tailwind, and code Playground

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" 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"></input>
    </div>
    <div class="name-number-header">
        <h5>HEADER<h5></div>
    <div class="name-number-field-container" data-size="Small">small:
    </div>
        <div class="name-number-field-container" 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"></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"></input>
    </div>
    <br clear="all">
    
<div class="name-number-header"><h5>HEADER<h5></div>
    <div class="name-number-field-container" data-size="Small">small:
    </div>
        <div class="name-number-field-container" 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;
}

JavaScript

$('.product-quantity').each(function () {
        $(this).data('val', this.value);
    }).on('change', function () {
        var val = $(this).val(),
            old = $(this).data('val'),
            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);
    });