Wordpress data persistence and increment in checkout bill with Snippets plugin

Question

This is about a Woocommerce, from scratch, delivery website. I also use Neve theme and Elementor. When I clic on a product of my cart page I make appear a modal in which the user can enter additional infos. I would like that the inputted data from the modal still persist after the page get refreshed and save that data to the order after checkout.

I tried AJAX and localstorage but obviously did it wrong. The following code is how I generate the modal with its form, when user clic on a product of the list. Additionnal data is added via an extra div with jQuery. I know it's far from state of the art, but that's what I have:

<script type="text/javascript">
    // Assurez-vous que jQuery est chargé
    if (typeof jQuery !== 'undefined') {
        jQuery(document).ready(function($) {
            
            // Attendre que la page soit entièrement chargée
            jQuery(".woocommerce table.shop_table.cart tr").on("click", function(e) {
                // Empêcher tout comportement par défaut (par exemple, un lien)
                e.preventDefault();

                // Afficher la modale avec les champs d'entrée
                showWelcomeModalWithInputs(this);
            });

            // Empêcher la propagation du clic à l'intérieur de la modale
            jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal input, .welcome-modal button, .welcome-modal label", function(e) {
                e.stopPropagation();
            });

            // Fermer la modale lors du clic sur la croix de fermeture
            jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal .close, .welcome-modal .close-modal", function() {
                closeWelcomeModal();
            });

            // Fermer la modale lors du clic sur le bouton "Soumettre"
            jQuery(".woocommerce table.shop_table.cart tr").on("click", ".welcome-modal button", function() {
                submitWelcomeForm();
            });
            
        });
    }
    
    // Fonction pour remplir les champs de la modale avec les valeurs existantes
        function fillModalInputs(clickedRow) {
            // Récupérer les valeurs existantes à partir des divs ajoutées précédemment
            var infoDiv = clickedRow.find('.info-container');

            // Remplir les champs de la modale avec les valeurs existantes
            jQuery('#input1').val(infoDiv.find('p:eq(0)').text());
            jQuery('#input2').val(infoDiv.find('p:eq(1)').text());
            jQuery('#datepicker').val(infoDiv.find('p:eq(2)').text());
        }
    
    // Fonction pour fermer la modale de bienvenue
            function closeWelcomeModal() {
                // Supprimer la modale en dehors de l'élément cliqué
                jQuery('.welcome-modal').remove();

                // Supprimer la classe "active" de tous les éléments
                jQuery(".woocommerce table.shop_table.cart tr").removeClass("active");
            }
    
    // Attacher l'événement de fermeture en cliquant en dehors de la modale au document
            jQuery(document).on("click", closeWelcomeModalOutsideClick);
    
    
    
    
    
    // Fonction pour afficher la modale de bienvenue avec les champs d'entrée et le calendrier
        function showWelcomeModalWithInputs(clickedRow) {
            
            var input1Value = jQuery(clickedRow).find('.info-container p:eq(0)').text();
            var input2Value = jQuery(clickedRow).find('.info-container p:eq(1)').text();
            var datepickerValue = jQuery(clickedRow).find('.info-container p:eq(2)').text();

            var modal = jQuery('<div class="welcome-modal">' +
                '<div class="modal-content">' +
                    '<span class="close">&times;</span>' +
                    '<div class="column">' +
                        '<p><label for="input1">Numéro de colis:</label><br><input type="text" id="input1" name="input1" value="' + input1Value + '"></p>' +
                        '<p><label for="input2">Adresse du relais colis:</label><br><input type="text" id="input2" name="input2" value="' + input2Value + '"></p>' +
                        '<p><label for="datepicker">Sélectionner une date:</label><br><input type="text" id="datepicker" name="datepicker" value="' + datepickerValue + '"></p>' +
                        '<button class="submitModal">Soumettre</button>' +
                    '</div>' +
                '</div>');

            // Ajout de la classe "active" pour cibler spécifiquement le conteneur cliqué
            jQuery(clickedRow).addClass("active");

            // Ajout de la modale à l'élément cliqué
            jQuery(clickedRow).append(modal);

            // Activer le Datepicker sur le champ d'entrée avec l'ID "datepicker"
            jQuery("#datepicker").datepicker();
            
            // Remplir les champs de la modale avec les valeurs existantes
                $('#input1').val(input1Value);
                $('#input2').val(input2Value);
                $('#datepicker').val(datepickerValue);
        }
    

    // Fonction pour fermer la modale de bienvenue
        function closeWelcomeModal() {
            // Supprimer la modale en dehors de l'élément cliqué
            jQuery('.welcome-modal').remove();

            // Supprimer la classe "active" de tous les éléments
            jQuery(".woocommerce table.shop_table.cart tr").removeClass("active");
        }

//      // Attacher l'événement de fermeture au document avec délégation d'événement
//      jQuery(document).on("click", ".welcome-modal .close, .welcome-modal .close-modal", function() {
//          closeWelcomeModal();
//      });
    

    // Attacher l'événement de fermeture en cliquant en dehors de la modale au document
    jQuery(document).on("click", closeWelcomeModalOutsideClick);



    // Fonction pour soumettre le formulaire dans la modale et mettre à jour les informations existantes
        function submitWelcomeForm() {
            // Récupérer le conteneur actif (celui qui a été cliqué)
            var clickedRow = jQuery(".woocommerce table.shop_table.cart tr.active");
            
            // Récupérer les valeurs des champs
                var input1Value = jQuery('#input1').val();
                var input2Value = jQuery('#input2').val();
                var datepickerValue = jQuery('#datepicker').val();


            // Vérifier si les champs contiennent une valeur avant de mettre à jour les informations existantes
            if (input1Value || input2Value || datepickerValue) {
                // Vérifier s'il existe déjà une div d'informations
                var infoDiv = clickedRow.find('.info-container');

                if (infoDiv.length > 0) {
                    // Mettre à jour les valeurs existantes dans la div d'informations
                    infoDiv.find('p:eq(0)').text(input1Value);
                    infoDiv.find('p:eq(1)').text(input2Value);
                    infoDiv.find('p:eq(2)').text(datepickerValue);
                } else {
                    // Créer une nouvelle div pour afficher les informations en bas du conteneur
                    infoDiv = jQuery('<div class="info-container same-style-as-existing-content"></div>');

                    // Ajouter les balises <p> avec les valeurs des inputs à la nouvelle div
                    infoDiv.append('<p>' + input1Value + '</p>');
                    infoDiv.append('<p>' + input2Value + '</p>');
                    infoDiv.append('<p>' + datepickerValue + '</p>');

                    // Ajouter la nouvelle div à la fin du conteneur existant
                    clickedRow.append(infoDiv);
                }
                
            }
            

    // Fermer la modale après la soumission
    closeWelcomeModal();

}
</script>