title: add remove input box using jQuery bootstrap
body: <p>I add remove input box using jQuery and bootstrap 3. I action when I have one input this worked and showed the add icon and show delete icon for each input+1. Now, in default dynamic form, I have two,three ... input box and need to show the delete icon for each input box. But I see delete icon when I click in add icon only. How can I fix this for show delete icon for each input box in default ?</p>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
  
      var MaxInputsAudio = 8; //maximum input boxes allowed
      var InputsWrapper = $("#AudioWrapper input"); //Input boxes wrapper ID
      var AddButton = "#AddMoreAudio"; //Add button ID
  
      var x = InputsWrapper.length; //initlal text box count
      var FieldCount = 1; //to keep track of text box added
  
      $(AddButton).click(function (e) //on add input button click
      {
          e.preventDefault();
          InputsWrapper = $("#AudioWrapper input");
          x = InputsWrapper.length;
          console.log(x + '  ' + MaxInputsAudio);
          if (x &lt; MaxInputsAudio) //max input box allowed
          {
              FieldCount++; //text box added increment
              //add input box
              $(InputsWrapper).parents('#AudioWrapper').append('&lt;div class="AudioRemove" style="position:relative;clear:both;"&gt;&lt;div style="float: left; width: 100%;"&gt;&lt;input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/&gt;&lt;/div&gt;&lt;div style="float: left; position: absolute; left: -31px;top:10px;"&gt;&lt;a href="#" class="removeclassAudio icon-minus fa-2x alerts-color"&gt;delete&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;');
              x++; //text box increment
          }
          return false;
      });
  
      $("body").on("click", ".removeclassAudio", function (e) { //user click on remove text
          console.log(x);
          if (x &gt; 1) {
              $(this).parents('.AudioRemove').remove(); //remove text box
              x--; //decrement textbox
          }
          return false;
      })
  
  });
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="audio" class="col-lg-1 control-label"&gt;&lt;/label&gt;
      &lt;div class="col-lg-9"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;div class="input-group input-group-md"&gt;    &lt;span class="input-group-addon"&gt;&lt;a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content=""&gt;&lt;i class=" icon-music"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
  
                      &lt;div id="AudioWrapper"&gt;
                          &lt;input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder=""&gt;
                              &lt;input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder=""&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8"&gt;Add&lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>NOTE</strong>: I print input box in <code>PHP</code> code using <code>each</code> , <code>foreach</code> loops. </p>
  
  <p>DEMO @ <a href="http://jsfiddle.net/ftg5s86g/" rel="nofollow">JSFIDDLE</a></p>