add/remove multiple input fields

Question

<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>

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.

<script>
  function add() {
    i++;
    var div1 = document.createElement('div');
    div1.innerHTML = '<select class="form-control" name="item_' + 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 + '" />';
    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 + '" />';
    document.getElementById('field3').appendChild(div3);

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

Answer 1

There are several issues:

• Avoid putting blobs of HTML in your javascript, put your HTML in the HTML file.
• Avoid IDs, particularly when they will certainly be duplicated. Duplicate IDs are illegal. Only the first one can be found with a lookup.
• Avoid concatenating together strings of text to generate your HTML. It is a too easy to make a mistake and put an XSS vulnerability in your code that way.

(function($) {
  "use strict";
  
  var itemTemplate = $('.example-template').detach(),
      editArea = $('.edit-area'),
      itemNumber = 1;
  
  $(document).on('click', '.edit-area .add', function(event) {
    var item = itemTemplate.clone();
    item.find('[name]').attr('name', function() {
      return $(this).attr('name') + '_' + itemNumber;
    });
    ++itemNumber;
    item.appendTo(editArea);
  });
  
  $(document).on('click', '.edit-area .rem', function(event) {
    editArea.children('.example-template').last().remove();
  });
  
  $(document).on('click', '.edit-area .del', function(event) {
    var target = $(event.target),
        row = target.closest('.example-template');
    row.remove();
  });
}(jQuery));

.hidden { display: none; }
.formfield { float: left; }
.example-template { clear: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <div class="example-template">
    <div class="formfield"><input placeholder="Name" name="name"></div>
    <div class="formfield"><input placeholder="Addr" name="addr"></div>
    <div class="formfield"><input placeholder="Post" name="post"></div>
    <div class="formfield"><button class="del">-</button></div>
  </div>
</div>

<div class="edit-area">
  <div class="controls">
    <button class="add">+</button>
    <button class="rem">-</button>
  </div>
</div>

This works by first grabbing the row template out of the hidden div element, and storing it in a variable. Each time it needs to make a new row, it clones the template and updates it. It updates it by adjusting the name element as required, appending "_" and a number. Once it has customized this copy of the template, it appends it to the edit area.