отображение входных значений после модального закрытия

Question

Я пытаюсь сделать что-то вроде этого.
Когда пользователь нажал на значок «+», отобразится форма внутри модального файла.

И когда пользователь нажимает на кнопку «добавить элемент», модальный будет закрыт и входные значения, введенные пользователем, будут отображаться только под значком «+». Проблема в том, что когда пользователь снова нажимает значок «+», форма будет показана, но при нажатии кнопки «добавить элемент» предыдущие входные значения будут изменены последними значениями, введенными пользователем.

значок "+"

 <div class="form-group"> 
       <span><b>Members:</b></span> 
       <a data-toggle="modal" data-target="#memberModal"><span class="fa fa-plus pull-right"></span></a> 
       <div class="row" id="showaddedmember"> 
        // DISPLAY ADDED MEMBER HERE 
       </div> 
     </div> 

форма фрагмент кода

 <div class="form-group row input_field"> 
       <label class="col-lg-4" style="text-align: right;">Firstname</label> 
       <div class="col-lg-8"><input type="text" class="form-control" name="firstname[]" id="firstname" placeholder="Firstname"></div> 
     </div> 
     <div class="form-group row input_field"> 
       <label class="col-lg-4" style="text-align: right;">Middlename</label> 
       <div class="col-lg-8"><input type="text" class="form-control" name="middlename[]" placeholder="Middlename"></div> 
     </div> 
     <div class="form-group row input_field"> 
       <label class="col-lg-4" style="text-align: right;">Lastname</label> 
       <div class="col-lg-8"><input type="text" class="form-control" name="lastname[]" placeholder="Lastname"></div> 
     </div> 
     <div class="form-group row input_field"> 
       <label class="col-lg-4" style="text-align: right;">Extension Name</label> 
       <div class="col-lg-8"><input type="text" class="form-control" name="extension_name[]" placeholder="Extension Name"></div> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-default" id="addmember_btn">Add Member</button> 
      </div> 

При нажатии на кнопку "добавить элемент" щелкают (я только пытался показать ПгвЬЫате)

$('#wrapper').on('click', '#addmember_btn', function(e){ 
      e.preventDefault(); 

      var data = new Array(); 
      var content = ""; 

      var fname = document.getElementById('firstname').value; 

      data[data.length] = fname; 

      for(var i = 0; i < data.length; i++) { 
       content +=data[i]+"<br>"; 
      } 

      document.getElementById('showaddedmember').innerHTML = content; 

    }); 

Я попытался выполнить console.log (данные), и только последние введенные введенные значения были сохранены в массиве данных. Я пытаюсь сделать что-то подобное, но моя форма должна быть модальной. (http://jsfiddle.net/KsuxV/).

Answer 1

Заменить

document.getElementById('showaddedmember').innerHTML = content; 

с

document.getElementById('showaddedmember').innerHTML += content; 

Answer 2

Вы уже используете JQuery так, use jQuery. Он будет обрабатывать добавление content внутрь, но в конце showaddedmemeber.

$('#wrapper').on('click', '#addmember_btn', function(e){ 
    e.preventDefault(); 
    var data = new Array(); 
    var content = ""; 
    var fname = document.getElementById('firstname').value; 
    data[data.length] = fname; 

    for(var i = 0; i < data.length; i++) { 
     content +=data[i]+"<br>"; 
    } 

    $('#showaddedmember').append(content); 

});