javascript-更改引导折叠表的id和目标

我有一个窗格，其中包含rails中表单的数据

    #accordion.panel-group
      #panel1.panel.panel-default
        .panel-heading
          %h4.panel-title
            %a{"data-target" => "#collapseOne", "data-toggle" => "collapse", href: "#collapseOne", :id => "panel-title"}
              Monument
        #collapseOne.panel-collapse.collapse.in
          .panel-body
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          .panel-footer
            = link_to_remove_association "Remove Destroyable", f, class: "btn btn-danger"

当用户单击“添加其他纪念碑”按钮时，面板将动态添加。我的问题是，我需要更改可折叠的id的值等等，以使每个面板都可以独立折叠。我完全不知道怎么做

    :javascript
      $(document).ready(function() {
        $('#accordion')
          .on('cocoon:after-insert', function() {
            var randValue=Math.random();
            var element=document.getElementById("panel-title");
            var panelement=document.getElementById("collapseOne");

            element.setAttribute("data-target",randValue);
            panelement.setAttribute("id",randValue);
          });

如果你能帮我完成这项工作，那可能真的是错的。在面板添加到页面后，将调用after insert操作

还有，有没有办法将面板的标题设置为输入值