在手风琴课中重复div

Question

我有一个手风琴div，里面还有另外一组Div，如下所示：

<div id="accordion">
  <div class="group">
    <h3>question 1
      <span class="draggable-handle"></span>
    </h3>
    <div>
      <div class="form-group row">
        <div class="col-md-12">
          <input class="form-control" placeholder="ENTER QUESTION 1">
        </div>
      </div>
      <div class="form-group row">
        <div class="file-upload col-md-4">
          <label for="upload-photo">Upload image/Video <span class="upload">upload</span></label>
          <input type="file" name="photo" id="upload-photo" />
        </div>
      </div>
      @if($surveytypeid == 2)
      <div class="form-group row">
        <div class="col-md-4 mb_20">
          <select class="custom-select">
            <option selected="">MULTIPLE CHOICE SINGLE SELECT</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
        </div>
      </div>
      @endif
      <div class="row">
        <div class="col-md-12 mb_20"><b>ADD OPTIONS</b></div>
      </div>
      <div class="form-group row">
        <div class="col-md-4">
          <input class="form-control" placeholder="OPTION 1">
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-4">
          <input class="form-control" placeholder="OPTION 2">
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-4 position-relative">
          <input class="form-control" placeholder="OPTION 3">
          <a class="add-option" href="" onclick="warning()"><img src="{{asset('admin/images/icn-add-option.png')}}" alt=""></a>
        </div>
      </div>
    </div>
  </div>

我需要通过单击按钮将div class="group"附加到手风琴div。目前，我的操作如下：

<button class="btn btn-secondary" type="button"  id="addQuestion"><i class="fas fa-plus"></i>ADD QUESTION</button>

我的脚本如下：

 $('#addQuestion').click(function() {

$("#accordion").append(
'<div class="group"><h3>question 1<span class="draggable-handle"></span></h3> <div><div class="form-group row"><div class="col-md-12"><input class="form-control" placeholder="ENTER QUESTION 1"></div></div><div class="form-group row"><div class="file-upload col-md-4"><label for="upload-photo">Upload image/Video <span class="upload">upload</span></label><input type="file" name="photo" id="upload-photo" /></div></div><div class="row"><div class="col-md-12 mb_20"><b>ADD OPTIONS</b></div></div><div class="form-group row"><div class="col-md-4"><input class="form-control" placeholder="OPTION 1"></div></div><div class="form-group row"><div class="col-md-4"><input class="form-control" placeholder="OPTION 2"></div> </div><div class="form-group row"><div class="col-md-4 position-relative"><input class="form-control" placeholder="OPTION 3"><a class="add-option" href=""  onclick="warning()"><img src="cn-add-option.png" alt=""></a></div></div></div></div>');
});
});

但是现在单击按钮，这些元素就会显示在手风琴类中。但是缺少CSS。没有可折叠的窗口出现。

这是我的手风琴目前的工作方式。第一个已经在html中，第二个通过单击按钮加载。

Answer 1

尝试以下代码作为按钮单击事件：

$('#addQuestion').click(function() {
    $(".group:last").after('<div class="group">' +
    '<h3>question 1<span class="draggable-handle"></span></h3>' + 
      '<div>' +
        '<div class="form-group row">' +
          '<div class="col-md-12">' +
            '<input class="form-control" placeholder="ENTER QUESTION 1">' +
          '</div>' +
        '</div>' +
        '<div class="form-group row">' +
          '<div class="file-upload col-md-4">' +
            '<label for="upload-photo">Upload image/Video <span class="upload">upload</span></label>' +
            '<input type="file" name="photo" id="upload-photo" />' +
          '</div>' +
        '</div>' +
        '<div class="row">' +
          '<div class="col-md-12 mb_20">' +
            '<b>ADD OPTIONS</b>' +
          '</div>' +
        '</div>' +
        '<div class="form-group row">   ' +
          '<div class="col-md-4">' +
            '<input class="form-control" placeholder="OPTION 1">' +
          '</div>' +
        '</div>' +
        '<div class="form-group row">' +
          '<div class="col-md-4">' +
            '<input class="form-control" placeholder="OPTION 2">' +
          '</div> ' +
        '</div>' +
        '<div class="form-group row">' +
          '<div class="col-md-4 position-relative">' +
            '<input class="form-control" placeholder="OPTION 3">' +
            '<a class="add-option" href=""  onclick="warning()"><img src="cn-add-option.png" alt=""></a>' +
          '</div>' +
        '</div>' +
      '</div>' +
'</div>'');
});