Добавить поле ввода с помощью jQuery bootstrap

Question

Я добавляю окно ввода ввода с помощью jQuery и bootstrap 3. Я выполняю действие, когда у меня есть один вход, который работал, и показывал значок добавления и показывал значок удаления для каждого входа + 1. Теперь в динамической форме по умолчанию у меня есть два, три ... окна ввода и вам нужно показать значок удаления для каждого окна ввода. Но я вижу значок удаления, когда я нажимаю только значок добавления. Как я могу исправить это для отображения значка удаления для каждого окна ввода по умолчанию?

JS:

$(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 < MaxInputsAudio) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      $(InputsWrapper).parents('#AudioWrapper').append('<div class="AudioRemove" style="position:relative;clear:both;"><div style="float: left; width: 100%;"><input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/></div><div style="float: left; position: absolute; left: -31px;top:10px;"><a href="#" class="removeclassAudio icon-minus fa-2x alerts-color">delete</a></div></div>'); 
      x++; //text box increment 
     } 
     return false; 
    }); 

    $("body").on("click", ".removeclassAudio", function (e) { //user click on remove text 
     console.log(x); 
     if (x > 1) { 
      $(this).parents('.AudioRemove').remove(); //remove text box 
      x--; //decrement textbox 
     } 
     return false; 
    }) 

}); 

HTML:

<div class="form-group"> 
    <label for="audio" class="col-lg-1 control-label"></label> 
    <div class="col-lg-9"> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content=""><i class=" icon-music"></i></a></span> 

        <div id="AudioWrapper"> 
         <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder=""> 
          <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder=""> 
        </div> 
       </div> 
      </div><a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a> 

     </div> 
    </div> 
</div> 

ПРИМЕЧАНИЕ: Я печатаю поле ввода в PHP кода с использованием each, foreach петли.

DEMO @JSFIDDLE

Answer 1

Вы должны поместить разметку для удаления элемента в исходном HTML-коде.

<div class="input-group input-group-md"> 
    <span class="input-group-addon"> 
     <a class="help-box" rel="popover" data-placement="top" data-original-title="" data-content=""> 
      <i class=" icon-music"></i> 
     </a> 
    </span> 
    <div id="AudioWrapper"> 
     <?php foreach($audiofiles as $index->$audio) : ?> 
      <input id="audio" onclick="" class="form-control" type="text" name="audio[]" placeholder=""> 
      <?php if($index > 0) : ?> 
      <div class="AudioRemove" style="position:relative;clear:both;"> 
       <div style="float: left; width: 100%;"> 
        <input id="audio" onclick="openKCFinder(this)" class="form-control" type="text" name="audio[]"/> 
       </div> 
      </div> 
      <?php endif; ?> 
     <?php endforeach; ?> 
    </div> 
</div> 
<a style="float:right" href="#" id="AddMoreAudio" class=" icon-plus icon-2x margin-top-8">Add</a> 

Обновлено скрипку here