changing form inputs inside loops

footer-scripts.html

<script>
document.addEventListener("DOMContentLoaded", () => {

   const loopElementID = 'brxe-dgflih'; /* the ID from the block with the query loop */
   const fieldName = 'field_29'; /* the 'name' attribute on the tel input in the form */
 
  const buttons = document.querySelectorAll('.open-form-1');
  
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      
      setTimeout(() => {
        
        const loopEl = this.closest('.' + loopElementID);
        const successMessage = loopEl.querySelector('.x-modal .wsf-alert-success');
        const phoneValue = this.getAttribute('data-phone');
        const form = loopEl.querySelector('.wsf-form');
        const inputField = form.querySelector('input[name="' + fieldName + '"]');

        if (successMessage) {
          successMessage.style.display = 'none';
        }
        
        form.style.display = 'block';

        if (inputField) {
          inputField.value = phoneValue;
        }
      }, 0); // increase the time (ms) if needed
    });
  });
});
</script>