JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="form-inline">
    <div class="form-group col-lg-4">
        <label>Select Item:</label>
        <div id="field1">
            <select class="form-control" name="item_1">
                <?php if($item !=0){foreach ($item as $list_item){?>
                <option value="<?php echo $list_item['item'];?>">
                    <?php echo $list_item[ 'item'];?>
                </option>
                <?php }}else {?>
                <option value="">No Items Available</option>
                <?php }?>
            </select>
        </div>
    </div>
    <div class="form-group col-lg-2">
        <label>Quantity:</label>
        <div id="field2">
            <input type="number" min="1" class="form-control input-md" name="quantity_1" />
        </div>
    </div>
    <div class="form-group col-lg-3">
        <label>Cost(per piece):</label>
        <div id="field3">
            <input type="number" min="1" class="form-control input-md" name="cost_1" />
        </div>
    </div>
    <div class="form-group col-lg-3" style="margin-top:25px">
        <div id="field4">
            <button id="addmore" onclick="add();" class="btn add-more" type="button">+</button>
        </div>
    </div>
</div>

JavaScript

var i = 0;
   window.add = function () {
       i++;
       var div1 = document.createElement('div');
       div1.innerHTML = '<select class="form-control" name="item_' + i + '" data-id="' + i + '" >  <option value=""></option></select>';
       document.getElementById('field1').appendChild(div1);

       var div2 = document.createElement('div');
       div2.innerHTML = '<input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" data-id="' + i + '"  />';
       document.getElementById('field2').appendChild(div2);

       var div3 = document.createElement('div');
       div3.innerHTML = '<input type="number" min="1" class="form-control input-md" name="cost_' + i + '"  data-id="' + i + '" />';
       document.getElementById('field3').appendChild(div3);

       var div4 = document.createElement('div');
       div4.innerHTML = '<button id="remove" onclick="remove_btn(this)" class="btn remove" type="button"  data-id="' + i + '" >-</button>';
       document.getElementById('field4').appendChild(div4);
   }

   window.remove_btn = function (e) {
       console.log(e.getAttribute("data-id"));
       var getElements = document.querySelectorAll('[data-id="' + e.getAttribute("data-id") + '"]');
       for (j = 0; j <= getElements.length; j++) {
           var parent = getElements[i].parentNode;
           if (parent == null) console.log(getElements[i]);
           parent && parent.removeChild(getElements[i]);
       }
   }