第二次行显示不正确

Question

ajax成功后，它会连续显示数据。如果我第一次添加新行，它会添加第一张图片，而第二次添加错误的方式

我的代码：

 <div class="row">
      <div class="col-3">
      </div>
      <div class="col-8">
         <div class="card">
            <div class="card-body">
               <h4 class="mt-0 header-title">Add Course</h4>
               <form method="POST" id="topic_form" class="form-horizontal well">
                  <fieldset>
                     <div class="repeater-custom-show-hide">
                        <div data-repeater-list="car">
                           <div data-repeater-item="">
                              <div class="form-group row  d-flex align-items-end">
                                 <div class="col-sm-12">
                                    <select  id="mainCatItem" name="mainCatItem" class="form-control">
                                    <option value="">Select Category</option>}
                                    option
                                        <?php foreach($fetchcat as $fetchcategory): ?>
                                          <option value="<?php echo $fetchcategory->main_category_id; ?>"><?php echo $fetchcategory->main_category_name; ?></option>
                                    <?php endforeach; ?>
                                    </select>
                                 </div>
                                 <!--end col-->     
                              <div id="course_show">
                                <div class="row">
                                 <div class="col-sm-6">
                                    <label class="control-label">Course Title</label>
                                    <input type="text" id="coursetitle"  name="coursetitle" class="form-control">
                                 </div>
                                 <!--end col-->
                                 <div class="col-sm-6">
                                    <label class="control-label">Short description</label>
                                    <input type="text" id="shortdesp" name="shortdesp"  class="form-control">
                                 </div>
                                 <div class="col-sm-6">
                                    <label class="control-label">Course Price</label>
                                    <input type="number" id="courseprice" name="courseprice" class="form-control">
                                 </div>
                                 <!--end col-->

                                  <div class="col-sm-12">
                                    <label class="control-label">Page Content</label>
                                    <textarea style="height: 100px !important" type="text" id="page_content" name="page_content" class=" form-control"></textarea>
                                 </div>
                                 <div class="col-sm-12">
                                    <label class="control-label">Long description</label>
                                    <textarea style="height: 100px !important" type="text" id="longdesp" name="longdesp" class=" form-control"></textarea>
                                 </div>
                                 <div class="col-sm-12">
                                    <label class="control-label">Trailer Video link</label>
                                    <input type="text" id="links" name="links" class="form-control">
                                 </div>

                            </div>     
                           </div>     

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

                 <div id="course_show2">
                   <div class="row">
                     <div class="col-12">
                      <h3>Video Detail</h3>
                       <form id="insertvideo" method="post">
                        <table id="addrow" width="100%">
                        <tr>
                          <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add" /></td>
                        </tr>
                        <tr class="clonetr">
                          <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
                          <td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td>
                          <td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td>
                          <td><input type="button" class="btn btn-danger deleteButton" value="delete" /></td>
                        </tr>
                      </table>
                       </form>  
                     </div>
                   </div>

                    <div class="col-sm-6" style="margin-top: 13px; margin-left: 400px;">
                     <!--  <button type="submit" id="insert"  class="btn btn-primary col-3 offset-1">Get Course</button> -->
                     <button type="submit" id="btn-update"   value="Submit" class="btn btn-primary col-3 offset-1">Save</button>
                  </div>
               </div>

           </fieldset>
         </form>

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

<script>
  $(document).ready(function() {
    $("#course_show").hide();
    $("#course_show2").hide();
  });

  $(function(){
    $(".addButton").click(function(){
    $('.clonetr:last').clone(true).appendTo("#addrow");
    $("#addrow tr:last input").val("");
    });
    $(".deleteButton").click(function(){
        if($('.deleteButton').length > 1)

           $(this).closest("tr").remove();
        else
          alert('Atleast one required.');
    });
});

     $('#mainCatItem').change(function(e){
         e.preventDefault();
         var mainCatId = $(this).val();
          $.ajax({
                url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail1",
                type: "POST",
                data: {mainCatId:mainCatId},
                dataType:'json',
                success: function(response)
                {
                  $("#course_show").show();
                  $("#course_show2").show();
                  console.log(response);
                    console.log(response[0].Category);

                  if(response.length>0){

                  $('#coursetitle').val(response[0].Course_title);
                  $('#shortdesp').val(response[0].Short_description);
                  $('#courseprice').val(response[0].Cource_price);
                  $('#courseduration').val(response[0].Cource_duration);
                  $('#page_content').text(response[0].page_content);
                  $('#longdesp').text(response[0].Long_decription);
                  $('#links').val(response[0].Links);
                  $('#videotitle').val(response[0].video_title);
                  $('#videodesc').val(response[0].video_description);
                  $('#videolink').val(response[0].video_links);

                   $('#btn-update').show();

                  }else{
                  }
                  $.ajax({
                        url: "<?php echo base_url();?>admin_controller/WebsiteContentController/fetchSubDetail",
                        type: "POST",
                        data: {mainCatId:mainCatId},
                        dataType:'html',
                        success: function(response)
                        {
                            $('#addrow tr:not(:first)').remove();
                            $('#addrow').append(response);
                            console.log(response);
                        }
                    });
            }

        });
     });
</script>

在我的ajax成功响应中有两条记录。
在显示两个记录数据之后，我在单击add按钮后添加了新行，但是添加行的方式与在第二张图像中显示的方式错误。 我想在最后一条记录之后添加一个新行。 这是我的完整代码。