title: add/remove multiple input fields
body: <pre><code>&lt;div class="form-inline"&gt;
  
    &lt;div class="form-group col-lg-4"&gt;
  
      &lt;label&gt;Select Item:&lt;/label&gt;
  
      &lt;div id="field1"&gt;
        &lt;select class="form-control" name="item_1"&gt;
          &lt;?php if($item !=0){foreach ($item as $list_item){?&gt;
          &lt;option value="&lt;?php echo $list_item['item'];?&gt;"&gt;
            &lt;?php echo $list_item[ 'item'];?&gt;
          &lt;/option&gt;
  
          &lt;?php }}else {?&gt;
          &lt;option value=""&gt;No Items Available&lt;/option&gt;
          &lt;?php }?&gt;
        &lt;/select&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-lg-2"&gt;
  
      &lt;label&gt;Quantity:&lt;/label&gt;
      &lt;div id="field2"&gt;
        &lt;input type="number" min="1" class="form-control input-md" name="quantity_1" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="form-group col-lg-3"&gt;
  
      &lt;label&gt;Cost(per piece):&lt;/label&gt;
      &lt;div id="field3"&gt;
        &lt;input type="number" min="1" class="form-control input-md" name="cost_1" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group col-lg-3" style="margin-top:25px"&gt;
      &lt;div id="field4"&gt;
        &lt;button id="addmore" onclick="add();" class="btn add-more" type="button"&gt;+&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have these three fields('item, quantity and cost') and these three fields are added incrementally on clicking + button but i am having removing these buttons on - click.
  I simply need these three input fields to be added at one click and remove these fields on one click as well. also these fields name should be incremented.</p>
  
  <pre><code>&lt;script&gt;
    function add() {
      i++;
      var div1 = document.createElement('div');
      div1.innerHTML = '&lt;select class="form-control" name="item_' + i + '"&gt;  &lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;';
      document.getElementById('field1').appendChild(div1);
  
      var div2 = document.createElement('div');
      div2.innerHTML = '&lt;input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" /&gt;';
      document.getElementById('field2').appendChild(div2);
  
      var div3 = document.createElement('div');
      div3.innerHTML = '&lt;input type="number" min="1" class="form-control input-md" name="cost_' + i + '" /&gt;';
      document.getElementById('field3').appendChild(div3);
  
      var div4 = document.createElement('div');
      div4.innerHTML = '&lt;button id="remove" onclick="remove_btn(this)" class="btn remove" type="button"&gt;-&lt;/button&gt;';
      document.getElementById('field4').appendChild(div4);
    }
  &lt;/script&gt;
  </code></pre>