Кнопка клонированного HTML-элемента не вызывает нужного события

Question

Я пытаюсь создать динамическую форму HTML. Поэтому, естественно, я добавил кнопку, которая будет клонировать div, содержащий поля. Но моя проблема в том, что прикрепленные события клика не будут правильно настроены. Вот пример моего HTML для формы.

    <button class="pull-right" id="add_trace_edit">+</button>
    <form id="trace_change_form" method="post" action="<?php echo 
            base_url("requests"); ?>/test" data-parsley-validate>
            <input type="submit" value="Submit">
            <div class="panel panel-dblue" id="trace_panel">
                   <div class="panel-heading text-right">
                         <button class="btn btn-xs btn-primary collapser" data-toggle="collapse"><span class="glyphicon glyphicon-resize-full"></span></button>
                   </div>
                   <div class="panel-body collapse">
                         <div class="trace_fields">
                              <div class="form-group row">
                                     <label for="" class="col-form-label col-lg-2">Trace ID:</label>
                                     <div class="col-lg-10">
                                             <input type="text" id="trace_id" name="trace_id[]" class="form-control" required>
                                     </div>
                             </div>
                             <div class="form-group row">
                                   <label for="remarks" class="control-label">Country:</label>
                                   <select id="remarks" name="country[]" class="form-control"></select>
                             </div>
                             <div class="form-group row">
                                  <label for="" class="col-form-label col-lg-2">Main Task:</label>
                                  <div class="col-lg-10">
                                        <input type="text" id="main_task" name="main_task[]" class="form-control" required>
                                  </div>
                             </div>
                             <div class="form-group">
                                   <label for="remarks" class="control-label">Remarks:</label>
                                   <textarea id="remarks" name="remarks[]" cols="60" rows="5" class="form-control"></textarea>
                             </div>
                         </div>
                   </div>
                   <div class="panel-footer">
                   </div>
              </div>
       </form>

А вот мои функции jquery:

       // to append the div to the form
       $('#add_trace_edit').click(function(){
             $("#trace_panel").clone(true).appendTo("#trace_change_form");
       });


       // to collapse the panel-body where the collapse button is clicked
       $(".collapser").click(function(event){
             $(this).parent().next().collapse("toggle");
       });

Моя проблема в этом. Когда элементы формы клонируются, когда не свернуты, к 3-му добавляются события неисправностей. Это переключает самый первый div. Но когда он клонируется, но еще не развернут, в большинстве случаев событие click переключает правильный div. Кто-нибудь имеет представление о том, почему это происходит? Из того, что я вижу, мой обход элементов DOM кажется правильным. Кто-нибудь может привести пример правильного способа копирования элементов формы?