I'm looking for a way to add a new bootstrap 4 accordion when I click on button. Anybody could you please help me on that? And moreover, code should be implemented in Jquery. That too, I don't know whether it is possible or not to add new accordion dynamically in jquery.
<script>
$(document).ready(function(){
$('#addAccordion').click( function() {
var newDiv = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
Collapsible Group Item #1</a>
</div>
<div id='collapseOne' class='collapse show' data-parent='#accordion'>
<div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>";
$('.display').append(newDiv);
});
});
</script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion">Add new accordion</button>