How can I bind an already existent script to a dynamic generated html?

Question

I'm a student and i encountered a problem. I have a div that generates this already hard-coded html element. This is the div:

 <div class="jquery-domanda">
  <div class="domanda">
    <div class="header-domanda">
      <h3>Domanda 1</h3>
      <div class="bottoniDomanda">
        <button class="modificaDomanda"><img src="assets/img/pencil.svg" alt="modifica"></button>
        <button class="cancellaDomanda"><img src="assets/img/trash-alt-solid.svg" alt="modifica"></button>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nulla commodi assumenda dignissimos! Eos, magnam facilis officia veniam ea, architecto et, fugit nostrum voluptates quis deleniti. Eos corporis labore laborum?</p>
  </div>
</div>

This is the div that triggers the script below:

  <div class="aggiungi-domanda domanda">
  <div> <img src="assets/img/Raggruppa 4.svg" alt="aggiungi" width="44px" height="44px">
    <h3>Aggiungi una domanda</h3>
  </div>
</div>

This is the script:

    $('.aggiungi-domanda').on("click", function(){
        var domanda = $('.jquery-domanda').html();
        $(this).before(domanda);
        
    })

The problem is that I have a script that runs on the "domanda" element involving some buttons, inputs and many things. How can I bind this very long (and not abstract) script to the several dynamic generated ".domanda"?

Thank you very much. Bye.