Php 在手风琴课上重复div

我有一个手风琴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>

我的脚本如下：

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

$（'#addQuestion'）。单击（函数（）{
$（“#手风琴”）。追加(
“问题1上传图像/视频上传添加选项”）；
});
});

但现在只要点击按钮，元素就会显示在accordion类中。但是CSS缺失了。不显示可折叠窗口

这就是我的手风琴现在的工作原理。第一个已在html中，第二个已通过单击按钮加载

---

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

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

$（'#addQuestion'）。单击（函数（）{
$（“.group:last”）。之后（“”+
“问题1”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“上传图像/视频上传”+
'' +
'' +
'' +
'' +
'' +
“添加选项”+
'' +
'' +
'   ' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
' ' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''');
});

在accordion Div中缺失我已经用我现在得到的屏幕截图更新了我的问题。但它仍然与我的屏幕截图相同。好的，在上面的代码行之后，我们需要再添加一点。在单击函数中，还添加$（“.group:last”）.accordion（{collapsable:true，heightStyle:“content”}）；这会奏效的

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