JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div data-role="content">
        <div id="dynamic">
          
            <div class="QtyWrapper ui-grid-b">
                <div  class="ui-block-a">
                    <input type="button" value="-" class="qtyminus" />
                </div>
                <div class="ui-block-b">
                    <input type="text" name="myInputs[qty][]" value="0" class="qty" class="ui-block-b" />
                </div>
                <div class="ui-block-c">
                    <input type="button" value="+" class="qtyplus" class="ui-block-c" />
                </div>
            </div>
            
        </div>
        <input type="button" value="Add another text input" onClick="addInput('dynamic')">
        <br />
    </div>
</div>

CSS

.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}

JavaScript

$("#dynamic").on("click", ".qtyplus, .qtyminus", function (e) {
        e.preventDefault();
        var $input = $(this).closest("div.QtyWrapper").find(".qty");
        var currentVal = parseInt($input.val());
        if (!isNaN(currentVal)) {
            $(this).hasClass("qtyplus") ? $input.val(currentVal + 1) : $input.val(currentVal - 1);
        } else {
            $input.val(0);
        }
    });

    function addInput(divName) {
        var html = "<div class='QtyWrapper'><select name='myInputs[issue][]'><option>Ett</option><option>TvĂĄ</option><option>TRE</option></select><input type='button' value='-' class='qtyminus' /><input type='text' name='myInputs[qty][]' value='0' class='qty' /><input type='button' value='+' class='qtyplus' /> </div>";
        $("#" + divName).append(html).trigger("create");
    }