モーダル終了後の入力値を表示

Question

私はこのようなことをしようとしています。
ユーザーが「+」アイコンをクリックすると、モーダル内のフォームが表示されます。ユーザが「メンバーを追加」ボタンをクリックしたときに

はまた、モーダルが閉じられ、ユーザーが入力した入力値は、単に「+」アイコンの下に表示されます。問題は、ユーザーが「+」アイコンを再度クリックするとフォームが表示されますが、「メンバーを追加」ボタンをクリックすると、前の入力値がユーザーによって入力された最新の値によって変更されます。

フォームコードスニペットは、 "メンバーを追加" ボタンをクリックする

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

が（私はFIRSTNAMEを表示しようとした）

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

"+" アイコン

$('#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

あなたはまだjQueryの、use jQueryを使用している

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

Answer 2

で

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

を交換してください。内部には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); 

});