JSFiddle - React, Tailwind, and code Playground

by Ersin Bilgin

HTML

<div id="add">Add row</div>
<form class="form-horizontal" id="list-items">
    <div class="panel-group accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="ui-tabs.html#item1">Item1</a>
                </h4>
            </div>
            <div id="item1" class="panel-collapse collapse">
                ...
            </div>
        </div>
    </div>
</form>

JavaScript

$('#add').click(function() {
  var newRow = $('.accordion').eq(0).clone();
  var newRow2 = newRow.html().replace(/item1/ig, 'item2')
  $('#list-items').append(newRow2);
});