$(() => { $('.delete_question_option').on('click', (e) => { e.preventDefault(); const source = e.target; $(source).closest('[data-attribute="question_option"]').hide(); }); $('.new_question_option').on('click', (e) => { e.preventDefault(); const source = e.target; const last = $(source).closest('[data-attribute="question_options"]').find('[data-attribute="question_option"]').last(); const cloned = last.clone(true); const array = $(cloned).find('[id$="_number"]').prop('id').match(/[^\d]*(\d)+[^$]*/); if (array) { const index = Number(array[1]); // Reset values for the new cloned inputs cloned.find(`[id$="${index}_number"]`).val(index + 2); cloned.find(`[id$=${index}_text]`).val(''); cloned.find(`[id$=${index}_is_default]`).prop('checked', false); cloned.find(`[id$="${index}__destroy"]`).val(false); cloned.find('input').each((i, el) => { // Rename id and name for the cloned inputs $(el).prop('id', $(el).prop('id').replace(/_\d+_/g, `_${index + 1}_`)); $(el).prop('name', $(el).prop('name').replace(/\[\d+\]/g, `[${index + 1}]`)); }); last.after(cloned); cloned.show(); } }); });