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>
I tried to change the scope of the second part (btnRemove function "click"), but it didn't work too.