JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div>
     <button onclick="actions.removeField()">
     -
      </button>
      <button onclick="actions.addField()">
      +
      </button> <div data-total></div>
    </div>
    <div data-form>

    </div>

</div>

JavaScript

var actions = {
    html_inputs:'<div class="form-group col-md-2"><input type="text" class="form-control campoDefault" placeholder="Material" onchange="actions.onChange()" name="material[]" id="material{item}" /></div>\
            <div class="form-group col-md-2"><input type="text" class="form-control campoDefault" placeholder="Descrição" name="descricao[]" id="descricao{item}"  /></div>\
            <div class="form-group col-md-1"> <input type="text" class="form-control campoDefault" placeholder="Depósito" name="deposito[]" id="deposito{item}" /></div>\
            <div class="form-group col-md-1"><input type="text" class="form-control campoDefault" placeholder="UM" name="um[]" id="um{item}"  required /></div>\
            <div class="form-group col-md-1"> <input type="text" class="form-control campoDefault" placeholder="QTD" name="qtd[]" id="qtd{item}" onchange="actions.onChange()" novocampo"/></div>\
            <div class="form-group col-md-2"> <input type="text" class="form-control campoDefault" placeholder="Unitátio" name="valor[]" id="valor{item}" required /></div>\
            <div class="form-group col-md-2"> <input type="text" class="form-control campoDefault" placeholder="Total" name="val_total[]" id="val_total{item}"  required /></div>',
    element:document.querySelector('[data-form]'),
    item:document.querySelector('[data-form]').childElementCount,
    addField:function(){
        if (actions.item < 100) {
        var el = actions.element;         
        var div = document.createElement('div');
            div.setAttribute('data-item', actions.item);
                 var total_display = document.querySelector('[data-total]');
                
                 div.innerHTML = actions.html_inputs.replace(/\{item\}/gi, actions.item);
                 el.appendChild(div);
                 actions.item = el.childElementCount;
                  total_display.textContent = actions.item;
                 } else {
                    alert('Máximo...