How can I configure a repeater in the WP form correctly?

48 Views Asked by At

I have the code below to set a form repeater's behavior created with JetEngine in Elementor. The objective is to allow the user make up to three inclusions and then the "Add Button" becomes inactive. However, if the user wants edit the rows before submit the form, he should be allowed to click in the delete button (X) and insert something else in the input. For this, the "Add Button" needs to become active again. In the code below, the row number 3, when clicked, doesn't change the state of the inactive "Add Button", only the rows 1 and 2. Can anyone tell me what's wrong in this code, please?

<script>
    jQuery(document).ready(function() {
        
        var btnOpacity = jQuery('.jet-form-repeater__new').on('click', function(){
            var repeaterField = jQuery('.jet-form-repeater__items').children();
            var btnRemove = jQuery('.jet-form-repeater__remove');
            
            console.log(btnRemove.length)
            
            if(repeaterField.length === 2) {
                btnOpacity.css('pointer-events', 'none');
                btnOpacity.text('Limite Atingido');                       
                btnOpacity.css('opacity', '0.5');
            }
            
            btnRemove.on('click', function(){
                btnOpacity.css('pointer-events', '');
                btnOpacity.text('Adicionar');
                btnOpacity.css('opacity', '1');
                console.log('clicou para remover')
            })
                
        })
        
    })
</script>

enter image description here

I tried to change the scope of the second part (btnRemove function "click"), but it didn't work too.

0

There are 0 best solutions below