How to implement a dynamic bootstrap 4 accordion using Jquery

Question

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>

Answer 1

With this you can add dynamic accordion also open and close accordion dynamically

let id = 0
$('#addAccordion').click(() => {
id++
       var test = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapse"+id+"'>" +
         "Collapsible Group Item "+id+"</a> </div> <div id='collapse"+id+"' class = 'collapse' data-parent = '#accordion' ><div class='card-body'> Lorem ipsum dolor sit amet, </div> </div> </div>";
       $('.display').append(test);
     });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></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 class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          consectetur adipisicing 
        </div>
      </div>
    </div>
    
  </div>
  
    <div class="display"> </div>