Aprire due form modali una con passaggio di parametri e l'alta no.

[Markus67]

schemo.jpg
Salve a tutti sto studiando java e voglio usare Bulma css come framework insieme a Thymeleaf ma conoscendo poco javascipt non riesco a ottenere quello che desidero, ossia aprire due form modali differenti una per inserimento e l'altra come update con selezione da tabella, ma riesco a far funzionare una o l'altra in modo corretto. (In allegato la pagina web)
Questo codice:

button type="button" class="toggle-modal button is-small is-info is-rounded"
        id="showModal2" 
        th:attr="data-id_cliente=${clienti.id_cliente}, data-nome=${clienti.nome}, 
        data-cognome=${clienti.cognome},data-partita_iva=${clienti.partita_iva},
        data-indirizzo=${clienti.indirizzo}, data-telefono=${clienti.telefono}">
        Edit
    </button>
    
    
<button type ="button" class="toggle-modal button is-primary is-rounded is-small" id="showModal1">
Nuovo Cliente
    </button>
    
    <div class="modal fade" role="dialog" id="myModal">
                <div class="modal-background"></div>
                    <div class="modal-card">
                        <header class="modal-card-head">
                        <p class="modal-card-title">Maschera Clienti: Update</p>
                        <button class="delete toggle-modal"></button>
                        </header>
                        <section class="modal-card-body">
                        <div th:insert="fragment :: form1"></div>
                        </section>
                </div>
    </div>
    
    <div class="modal fade" role="dialog" id="myModal2">
                <div class="modal-background"></div>
                    <div class="modal-card">
                        <header class="modal-card-head">
                        <p class="modal-card-title">Maschera Clienti: Insert</p>
                        <button class="delete toggle-modal"></button>
                        </header>
                        <section class="modal-card-body">
                        <div th:insert="fragment :: form2"></div>
                        </section>
                </div>
    </div>

Questo è il codice javascript che mi funziona per la selezione nella tabella non so come aggiungere altro per usare altra form:

var modal = document.getElementById('myModal');
    var elements = document.getElementsByClassName('toggle-modal');
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', toggleClass);
        }
    function toggleClass() {
        modal.classList.toggle('is-active');
        $("#id_cliente").val($(this).data('id_cliente'));
        $("#nome").val($(this).data('nome'));
        $("#cognome").val($(this).data('cognome'));
        $("#partita_iva").val($(this).data('partita_iva'));
        $("#indirizzo").val($(this).data('indirizzo'));
        $("#paese").val($(this).data('paese'));
        $("#telefono").val($(this).data('telefono'));
        }