Div не добавляется более одного раза в jquery?

Question

Я пытаюсь добавить динамические поля с именем массива, я сделал это, как

<div class="extra_subject"></div> 
<button class="add_sub btn">Add</button> 
<button class="rem_sub btn">Remove</button> 

В JS я сделал

var subject_div = $('<div class="sub_add_extra">' 
    +'<div class="control-group">' 
     +'<label for="sub_form" class="control-label">Subject</label>' 
     +'<div class="controls">' 
      +'<select name="add_subject[]">' 
       +'<option value="">Please Select</option>' 
       <?php foreach($sub as $row){ ?> 
        +'<option value="<?php echo $row->id; ?>" ><?php echo $row->subject_name; ?></option>' 
       <?php } ?> 
      +'</select>' 
     +'</div>' 
    +'</div>' 
+'</div>'); 
$('.add_sub').click(function(e){ 
    e.preventDefault(); 
    $('.extra_subject').append(subject_div); 
}); 
$('.rem_sub').click(function(e){ 
    e.preventDefault(); 
    $('.sub_add_extra').last().remove(); 
}); 

Его содержанием добавляемого в первый раз, а затем, когда я пытаюсь добавить его перезапись существующий div с классом .sub_add_extra и удаляет правильно, когда я нажимаю remove.

Answer 1

Использование clone()

$('.add_sub').click(function(e){ 
    e.preventDefault(); 
    $('.extra_subject').append(subject_div.clone()); 
}); 

DEMO HERE Прямо сейчас вы снова и снова, добавляя тот же объект. clone() создаст клон этого объекта и добавит этот клонированный объект каждый раз. Если у вас было какое-то событие, прикрепленное к исходному объекту, используйте clone(true)

Answer 2

Попробуйте мой создание функции, как это и использовать на кнопку он будет работать определенно

function addmoreoption() { 
    var html_option = '<tr valign="center"><td valign="center" bgcolor="#E8E8E8" >Name</td></tr>'; 
    $('#more_option').append(html_option); 
}