<script>
(function() {
  // ===== Configurable variables =====
  const MAX_FIELDS = 6; // 1 permanent + 5 extra fields
  const ADD_BUTTON_ID = 'add_field_btn'; // ID of the Add button
  const PERMANENT_INPUT_ID = 'input-1'; // ID of the permanent input
  const EXTRA_WRAPPER_CLASS_PREFIX = 'rsform-block-extra-input-'; // prefix for extra field wrappers
 
  // ===== Functions =====
 
  // Wrap input in flex container with optional Remove button
  function wrapInputFlex(input, addRemoveButton = false) {
    if (!input) return;
    const controls = input.closest('.formControls');
    if (!controls) return;
    if (controls.querySelector('.d-flex')) return;
 
    const flex = document.createElement('div');
    flex.className = 'd-flex align-items-center gap-2';
    flex.appendChild(input);
 
    if (addRemoveButton) {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.textContent = 'Remove';
      btn.className = 'btn btn-secondary btn-sm remove-btn';
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        input.value = '';
        const wrapper = input.closest('.rsform-block');
        if (wrapper) wrapper.style.display = 'none';
      });
      flex.appendChild(btn);
    }
 
    controls.insertBefore(flex, controls.firstChild);
  }
 
  // Find Add button
  function findAddButton() {
    return document.getElementById(ADD_BUTTON_ID) ||
      document.querySelector('.rsform-block-add-field-button .formControls button, .rsform-block-add-field-button .formControls input[type="button"]');
  }
 
  // Find wrapper for extra-input-N
  function findWrapper(index) {
    return document.querySelector(`.${EXTRA_WRAPPER_CLASS_PREFIX}${index}`);
  }
 
  // Count visible fields
  function computeCurrent(wrappers) {
    let visibleExtras = 0;
    wrappers.forEach(obj => {
      if (obj.wrapper && window.getComputedStyle(obj.wrapper).display !== 'none') visibleExtras++;
    });
    return 1 + visibleExtras; // permanent input
  }
 
  // Show next hidden wrapper
  function showNext(wrappers) {
    for (const obj of wrappers) {
      if (!obj.wrapper) continue;
      if (window.getComputedStyle(obj.wrapper).display === 'none') {
        obj.wrapper.style.display = 'flex';
        const input = obj.wrapper.querySelector('input, textarea, select');
        wrapInputFlex(input, true);
        return true;
      }
    }
    return false;
  }
 
  // ===== Initialization =====
  document.addEventListener('DOMContentLoaded', function() {
    const addBtn = findAddButton();
    if (!addBtn) return;
 
    // Wrap permanent input (no Remove button)
    const permInput = document.getElementById(PERMANENT_INPUT_ID);
    if (permInput) wrapInputFlex(permInput, false);
 
    // Hide extra field wrappers initially
    const wrappers = [];
    for (let i = 2; i <= MAX_FIELDS; i++) {
      const w = findWrapper(i);
      if (w) {
        wrappers.push({ index: i, wrapper: w });
        w.style.display = 'none';
      }
    }
 
    // Add button click handler
    addBtn.addEventListener('click', function(e) {
      e.preventDefault();
      if (computeCurrent(wrappers) >= MAX_FIELDS) {
        alert('Maximum of ' + (MAX_FIELDS - 1) + ' extra fields reached.');
        return;
      }
      showNext(wrappers);
    });
  });
})();
</script>