JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/template" id="categoryTemplate">
    <div class="category" id="category{{ID}}"> 
        <div class="row">
            <!-- Till Category -->
            <div class="col col-lg-8">
                <div class="form-group">
                    <label class="control-label" for="Category{{ID}}">Category{{ID}}</label>
                    <select id="Category{{ID}}" name="Category{{ID}}" class="form-control">
                        <option>Option one</option>
                        <option>Option two</option>
                    </select>
                </div>
            </div>

            <!-- helpful addition-->
            <div class="col col-lg-1">
                <div class="form-group">
                    <label class="control-label" for="Qty{{ID}}">qty{{ID}}</label>
                    <input id="Qty{{ID}}" name="Qty{{ID}}" type="text" placeholder="Quantity" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Cost{{ID}}">Cost{{ID}}</label>
                    <input id="Cost{{ID}}" name="Cost{{ID}}" type="text" placeholder="Cost" class="form-control">
                </div>
            </div>
            <div class="col col-lg-1"> 
                <!-- Text input-->
                <div class="form-group">
                    <label class="control-label" for="Total{{ID}}">Total{{ID}}</label>
                    <input id="Total{{ID}}" name="Total{{ID}}" type="text" placeholder="" class="form-control">
                </div>
            </div>
            
        </div>
    </div>
</script>
<div id='categories'></div>
<div class="col col-lg-1"> 
    <!-- Text input-->
    <div class="form-group">
        <label class="control-label" for="another">New</label>
        <button type="button" name="another" class="btn btn-info btn-sm form-control...

JavaScript

var clone = (function(){
    
    var cloneIndex = 0; 
    var template = $('#categoryTemplate').text(); 
    
    return function(){
        //Replace all instances of {{ID}} in our template with the cloneIndex.
        return template.replace(/{{ID}}/g, ++cloneIndex);  
    } 
    
})();//self executing function.

var categories = $('#categories')

$(document).on("click", 'button.clone', function(){
  categories.append(clone()); 
});

//Start us off with 1 category.
categories.append(clone());