From 82dc9dbd81793b5b8ed0d10b8aa5669c3166f2ec Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Tue, 23 Jan 2024 13:57:15 +0300
Subject: [PATCH 01/17] Just saving progress

---
 js/formidable_admin.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 6df8e6d7f4..aeb8a81477 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2143,6 +2143,7 @@ function frmAdminBuildJS() {
 				updateFieldOrder();
 				afterAddField( msg, false );
 				maybeDuplicateUnsavedSettings( fieldId, msg );
+				maybeDuplicateUnsavedOptions( fieldId, msg );
 				toggleOneSectionHolder( replaceWith.find( '.start_divider' ) );
 				$field[0].querySelector( '.frm-dropdown-menu.dropdown-menu-right' )?.classList.remove( 'show' );
 			}
@@ -2150,6 +2151,38 @@ function frmAdminBuildJS() {
 		return false;
 	}
 
+	function maybeDuplicateUnsavedOptions( originalFieldId, newFieldHtml ) {
+		const newFieldId = jQuery( newFieldHtml ).attr( 'data-fid' );
+		const newOptsContainer  = document.getElementById( `frm_field_${newFieldId}_opts` );
+		const origOptsContainer = document.getElementById( `frm_field_${originalFieldId}_opts` );
+
+		if ( ! newOptsContainer || ! origOptsContainer ) {
+			return;
+		}
+
+		const numberOfNewFieldOptions  = newOptsContainer.getElementsByTagName( 'li' ).length;
+		const numberOfOrigFieldOptions = origOptsContainer.getElementsByTagName( 'li' ).length;
+
+		if ( numberOfOrigFieldOptions === numberOfNewFieldOptions ) {
+			return;
+		}
+
+		const differenceInOpts = numberOfOrigFieldOptions - numberOfNewFieldOptions;
+		const origOpts         = origOptsContainer.querySelectorAll( 'li' );
+		const optsToCopy = Array.from( origOpts ).slice( Math.max( 0, origOpts.length - differenceInOpts ) );
+		optsToCopy.forEach ( ( li ) => {
+			let elementString = li.outerHTML;
+			const regex = new RegExp( originalFieldId, 'g' );
+			elementString = elementString.replace( regex, newFieldId );
+			const tempDiv = document.createElement( 'div' );
+			tempDiv.innerHTML = elementString;
+			const newOpt = tempDiv.firstChild;
+			const input = li.querySelector( `.field_${originalFieldId}_option` );
+			newOpt.querySelector( `.field_${newFieldId}_option` ).innerHTML = input.innerHTML;
+			newOptsContainer.append( newOpt );
+		});
+	}
+
 	function maybeDuplicateUnsavedSettings( originalFieldId, newFieldHtml ) {
 		var originalSettings, newFieldId, copySettings, fieldOptionKeys, originalDefault, copyDefault;
 

From 3230fc986c534cc55cd460ad9ca89ee47c3b7904 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:35:46 +0300
Subject: [PATCH 02/17] Copy checkboxes in preview

---
 js/formidable_admin.js | 42 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index aeb8a81477..7269997bfa 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2156,10 +2156,13 @@ function frmAdminBuildJS() {
 		const newOptsContainer  = document.getElementById( `frm_field_${newFieldId}_opts` );
 		const origOptsContainer = document.getElementById( `frm_field_${originalFieldId}_opts` );
 
-		if ( ! newOptsContainer || ! origOptsContainer ) {
+		if ( ! newOptsContainer || ! origOptsContainer || ! newOptsContainer.dataset.key || ! origOptsContainer.dataset.key ) {
 			return;
 		}
 
+		const newFieldKey = newOptsContainer.dataset.key;
+		const origFieldKey = origOptsContainer.dataset.key;
+
 		const numberOfNewFieldOptions  = newOptsContainer.getElementsByTagName( 'li' ).length;
 		const numberOfOrigFieldOptions = origOptsContainer.getElementsByTagName( 'li' ).length;
 
@@ -2167,20 +2170,43 @@ function frmAdminBuildJS() {
 			return;
 		}
 
-		const differenceInOpts = numberOfOrigFieldOptions - numberOfNewFieldOptions;
-		const origOpts         = origOptsContainer.querySelectorAll( 'li' );
-		const optsToCopy = Array.from( origOpts ).slice( Math.max( 0, origOpts.length - differenceInOpts ) );
-		optsToCopy.forEach ( ( li ) => {
+		const origOpts             = origOptsContainer.querySelectorAll( 'li' );
+		newOptsContainer.innerHTML = '';
+
+		let regex;
+		const tempDiv = document.createElement( 'div' );
+
+		origOpts.forEach ( li => {
 			let elementString = li.outerHTML;
-			const regex = new RegExp( originalFieldId, 'g' );
+			regex = new RegExp( originalFieldId, 'g' );
 			elementString = elementString.replace( regex, newFieldId );
-			const tempDiv = document.createElement( 'div' );
+			regex = new RegExp( origFieldKey, 'g' );
+			elementString = elementString.replace( regex, newFieldKey );
 			tempDiv.innerHTML = elementString;
 			const newOpt = tempDiv.firstChild;
 			const input = li.querySelector( `.field_${originalFieldId}_option` );
-			newOpt.querySelector( `.field_${newFieldId}_option` ).innerHTML = input.innerHTML;
+			newOpt.querySelector( `.field_${newFieldId}_option` ).value = input.value;
 			newOptsContainer.append( newOpt );
 		});
+
+		const origOptsPreview = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const newOptsPreview  = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+
+		if ( ! origOptsPreview || ! newOptsPreview ) {
+			return;
+		}
+
+		newOptsPreview.innerHTML = '';
+		for ( const child of origOptsPreview.children ) {
+			let elementHTML = child.outerHTML;
+			regex = new RegExp( originalFieldId, 'g' );
+			elementHTML = elementHTML.replace( regex, newFieldId );
+			regex = new RegExp( origFieldKey, 'g' );
+			elementHTML = elementHTML.replace( regex, newFieldKey );
+			tempDiv.innerHTML = elementHTML;
+			const newOpt = tempDiv.firstChild;
+			newOptsPreview.append( newOpt );
+		}
 	}
 
 	function maybeDuplicateUnsavedSettings( originalFieldId, newFieldHtml ) {

From 9ddd39970c4d74785e0ec35939e22c7ce82317b9 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 12:33:25 +0300
Subject: [PATCH 03/17] Extract repeated logic to new function

---
 js/formidable_admin.js | 43 +++++++++++++++---------------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 7269997bfa..f6a8bad198 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2160,32 +2160,14 @@ function frmAdminBuildJS() {
 			return;
 		}
 
-		const newFieldKey = newOptsContainer.dataset.key;
-		const origFieldKey = origOptsContainer.dataset.key;
-
-		const numberOfNewFieldOptions  = newOptsContainer.getElementsByTagName( 'li' ).length;
-		const numberOfOrigFieldOptions = origOptsContainer.getElementsByTagName( 'li' ).length;
-
-		if ( numberOfOrigFieldOptions === numberOfNewFieldOptions ) {
-			return;
-		}
+		const newFieldKey      = newOptsContainer.dataset.key;
+		const originalFieldKey = origOptsContainer.dataset.key;
 
 		const origOpts             = origOptsContainer.querySelectorAll( 'li' );
 		newOptsContainer.innerHTML = '';
 
-		let regex;
-		const tempDiv = document.createElement( 'div' );
-
 		origOpts.forEach ( li => {
-			let elementString = li.outerHTML;
-			regex = new RegExp( originalFieldId, 'g' );
-			elementString = elementString.replace( regex, newFieldId );
-			regex = new RegExp( origFieldKey, 'g' );
-			elementString = elementString.replace( regex, newFieldKey );
-			tempDiv.innerHTML = elementString;
-			const newOpt = tempDiv.firstChild;
-			const input = li.querySelector( `.field_${originalFieldId}_option` );
-			newOpt.querySelector( `.field_${newFieldId}_option` ).value = input.value;
+			const newOpt = replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, li );
 			newOptsContainer.append( newOpt );
 		});
 
@@ -2198,17 +2180,22 @@ function frmAdminBuildJS() {
 
 		newOptsPreview.innerHTML = '';
 		for ( const child of origOptsPreview.children ) {
-			let elementHTML = child.outerHTML;
-			regex = new RegExp( originalFieldId, 'g' );
-			elementHTML = elementHTML.replace( regex, newFieldId );
-			regex = new RegExp( origFieldKey, 'g' );
-			elementHTML = elementHTML.replace( regex, newFieldKey );
-			tempDiv.innerHTML = elementHTML;
-			const newOpt = tempDiv.firstChild;
+			const newOpt = replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, child );
 			newOptsPreview.append( newOpt );
 		}
 	}
 
+	function replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, element ) {
+		const tempDiv     = document.createElement( 'div' );
+		let regex         = new RegExp( originalFieldId, 'g' );
+		let elementString = element.outerHTML.replace( regex, newFieldId );
+		regex             = new RegExp( originalFieldKey, 'g' );
+		elementString     = elementString.replace( regex, newFieldKey );
+		tempDiv.innerHTML = elementString;
+
+		return  tempDiv.firstChild;
+	}
+
 	function maybeDuplicateUnsavedSettings( originalFieldId, newFieldHtml ) {
 		var originalSettings, newFieldId, copySettings, fieldOptionKeys, originalDefault, copyDefault;
 

From c3fabce2e8a9d584e341111dc0f694d95f1a431d Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 13:01:20 +0300
Subject: [PATCH 04/17] Refactor function further

---
 js/formidable_admin.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index f6a8bad198..53cb5fafe5 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2166,26 +2166,37 @@ function frmAdminBuildJS() {
 		const origOpts             = origOptsContainer.querySelectorAll( 'li' );
 		newOptsContainer.innerHTML = '';
 
+		const args = { originalFieldId, originalFieldKey, newFieldId, newFieldKey };
+
 		origOpts.forEach ( li => {
-			const newOpt = replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, li );
+			const newOpt = replaceElementAttribute( li, args );
+			const input  = li.querySelector( `.field_${originalFieldId}_option` );
+			newOpt.querySelector( `.field_${newFieldId}_option` ).value = input.value;
 			newOptsContainer.append( newOpt );
 		});
 
-		const origOptsPreview = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
-		const newOptsPreview  = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const newFieldOpts  = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
 
-		if ( ! origOptsPreview || ! newOptsPreview ) {
+		if ( ! originalFieldOpts || ! newFieldOpts ) {
 			return;
 		}
 
-		newOptsPreview.innerHTML = '';
-		for ( const child of origOptsPreview.children ) {
-			const newOpt = replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, child );
-			newOptsPreview.append( newOpt );
+		copyUnsavedOptions( newFieldOpts, originalFieldOpts, args )
+
+	}
+
+	function copyUnsavedOptions( newFieldOpts, originalFieldOpts, args ) {
+		newFieldOpts.innerHTML = '';
+		for ( const child of originalFieldOpts.children ) {
+			const newOpt = replaceElementAttribute( child, args );
+			newFieldOpts.append( newOpt );
 		}
 	}
 
-	function replaceElementAttribute( originalFieldId, originalFieldKey, newFieldId, newFieldKey, element ) {
+	function replaceElementAttribute( element, args ) {
+		const { originalFieldId, originalFieldKey, newFieldId, newFieldKey } = args;
+
 		const tempDiv     = document.createElement( 'div' );
 		let regex         = new RegExp( originalFieldId, 'g' );
 		let elementString = element.outerHTML.replace( regex, newFieldId );

From b4634a0e3275ff9fea4324f77b4fa5b002a21df3 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 13:16:37 +0300
Subject: [PATCH 05/17] Force new value to show up

---
 js/formidable_admin.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 53cb5fafe5..596aa683ae 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2172,11 +2172,12 @@ function frmAdminBuildJS() {
 			const newOpt = replaceElementAttribute( li, args );
 			const input  = li.querySelector( `.field_${originalFieldId}_option` );
 			newOpt.querySelector( `.field_${newFieldId}_option` ).value = input.value;
+			newOpt.querySelector( `#field_key_${newFieldId}-${li.dataset.optkey}` ).value = li.querySelector( `#field_key_${originalFieldId}-${li.dataset.optkey}` ).value;
 			newOptsContainer.append( newOpt );
 		});
 
 		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
-		const newFieldOpts  = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
 
 		if ( ! originalFieldOpts || ! newFieldOpts ) {
 			return;

From b139f229354e9b20bed351f9ade1285743953a72 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:48:07 +0300
Subject: [PATCH 06/17] Clean up code

---
 js/formidable_admin.js | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 596aa683ae..2e80b3427c 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2159,22 +2159,16 @@ function frmAdminBuildJS() {
 		if ( ! newOptsContainer || ! origOptsContainer || ! newOptsContainer.dataset.key || ! origOptsContainer.dataset.key ) {
 			return;
 		}
+		newOptsContainer.innerHTML = '';
 
 		const newFieldKey      = newOptsContainer.dataset.key;
 		const originalFieldKey = origOptsContainer.dataset.key;
 
-		const origOpts             = origOptsContainer.querySelectorAll( 'li' );
-		newOptsContainer.innerHTML = '';
-
 		const args = { originalFieldId, originalFieldKey, newFieldId, newFieldKey };
 
-		origOpts.forEach ( li => {
-			const newOpt = replaceElementAttribute( li, args );
-			const input  = li.querySelector( `.field_${originalFieldId}_option` );
-			newOpt.querySelector( `.field_${newFieldId}_option` ).value = input.value;
-			newOpt.querySelector( `#field_key_${newFieldId}-${li.dataset.optkey}` ).value = li.querySelector( `#field_key_${originalFieldId}-${li.dataset.optkey}` ).value;
-			newOptsContainer.append( newOpt );
-		});
+		const origOpts = origOptsContainer.querySelectorAll( 'li' );
+
+		copyUnsavedDeleteOptions( origOpts, newOptsContainer, args );
 
 		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
 		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
@@ -2184,7 +2178,29 @@ function frmAdminBuildJS() {
 		}
 
 		copyUnsavedOptions( newFieldOpts, originalFieldOpts, args )
+	}
+
+	function copyUnsavedDeleteOptions( origOpts, newOptsContainer, args ) {
+		const { originalFieldId, newFieldId } = args;
 
+		for ( li of origOpts ) {
+			const newOpt           = replaceElementAttribute( li, args );
+			const originalOptValue = li.querySelector( `.field_${originalFieldId}_option` );
+			const newOptValue      = newOpt.querySelector( `.field_${newFieldId}_option` );
+
+			if ( newOptValue && originalOptValue ) {
+				newOptValue.value = originalOptValue.value;
+			}
+
+			const newOptKey      = newOpt.querySelector( `#field_key_${newFieldId}-${li.dataset.optkey}` );
+			const originalOptKey = li.querySelector( `#field_key_${originalFieldId}-${li.dataset.optkey}` );
+
+			if ( newOptKey && originalOptKey ) {
+				newOptKey.value = originalOptKey.value;
+			}
+
+			newOptsContainer.append( newOpt );
+		}
 	}
 
 	function copyUnsavedOptions( newFieldOpts, originalFieldOpts, args ) {

From 07c1460bd07411963b20f488142921cf3cf76515 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:51:36 +0300
Subject: [PATCH 07/17] Refactoring a bit more

---
 js/formidable_admin.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 2e80b3427c..18470bcf19 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2184,22 +2184,22 @@ function frmAdminBuildJS() {
 		const { originalFieldId, newFieldId } = args;
 
 		for ( li of origOpts ) {
-			const newOpt           = replaceElementAttribute( li, args );
+			const newOptLi         = replaceElementAttribute( li, args );
 			const originalOptValue = li.querySelector( `.field_${originalFieldId}_option` );
-			const newOptValue      = newOpt.querySelector( `.field_${newFieldId}_option` );
+			const newOptValue      = newOptLi.querySelector( `.field_${newFieldId}_option` );
 
 			if ( newOptValue && originalOptValue ) {
 				newOptValue.value = originalOptValue.value;
 			}
 
-			const newOptKey      = newOpt.querySelector( `#field_key_${newFieldId}-${li.dataset.optkey}` );
+			const newOptKey      = newOptLi.querySelector( `#field_key_${newFieldId}-${li.dataset.optkey}` );
 			const originalOptKey = li.querySelector( `#field_key_${originalFieldId}-${li.dataset.optkey}` );
 
 			if ( newOptKey && originalOptKey ) {
 				newOptKey.value = originalOptKey.value;
 			}
 
-			newOptsContainer.append( newOpt );
+			newOptsContainer.append( newOptLi );
 		}
 	}
 
@@ -2214,11 +2214,11 @@ function frmAdminBuildJS() {
 	function replaceElementAttribute( element, args ) {
 		const { originalFieldId, originalFieldKey, newFieldId, newFieldKey } = args;
 
-		const tempDiv     = document.createElement( 'div' );
 		let regex         = new RegExp( originalFieldId, 'g' );
 		let elementString = element.outerHTML.replace( regex, newFieldId );
 		regex             = new RegExp( originalFieldKey, 'g' );
 		elementString     = elementString.replace( regex, newFieldKey );
+		const tempDiv     = document.createElement( 'div' );
 		tempDiv.innerHTML = elementString;
 
 		return  tempDiv.firstChild;

From 8608da6c7ce60b64466190125e8b4c262033ecfc Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:57:14 +0300
Subject: [PATCH 08/17] Simplify functions

---
 js/formidable_admin.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 18470bcf19..03bfedaad5 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2166,21 +2166,14 @@ function frmAdminBuildJS() {
 
 		const args = { originalFieldId, originalFieldKey, newFieldId, newFieldKey };
 
-		const origOpts = origOptsContainer.querySelectorAll( 'li' );
-
-		copyUnsavedDeleteOptions( origOpts, newOptsContainer, args );
-
-		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
-		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args );
 
-		if ( ! originalFieldOpts || ! newFieldOpts ) {
-			return;
-		}
-
-		copyUnsavedOptions( newFieldOpts, originalFieldOpts, args )
+		copyUnsavedOptions( args )
 	}
 
-	function copyUnsavedDeleteOptions( origOpts, newOptsContainer, args ) {
+	function copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args ) {
+		const origOpts = origOptsContainer.querySelectorAll( 'li' );
+
 		const { originalFieldId, newFieldId } = args;
 
 		for ( li of origOpts ) {
@@ -2203,7 +2196,16 @@ function frmAdminBuildJS() {
 		}
 	}
 
-	function copyUnsavedOptions( newFieldOpts, originalFieldOpts, args ) {
+	function copyUnsavedOptions( args ) {
+		const { originalFieldId, newFieldId } = args;
+
+		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+
+		if ( ! originalFieldOpts || ! newFieldOpts ) {
+			return;
+		}
+
 		newFieldOpts.innerHTML = '';
 		for ( const child of originalFieldOpts.children ) {
 			const newOpt = replaceElementAttribute( child, args );

From 85f56fdc292da6252132541ab28e67ce8c3b0fcc Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:09:28 +0300
Subject: [PATCH 09/17] Add function comments

---
 js/formidable_admin.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 03bfedaad5..d1d1ca9c37 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2151,6 +2151,13 @@ function frmAdminBuildJS() {
 		return false;
 	}
 
+	/**
+	 * Duplicates field options that are not saved after being modified to the new field.
+	 *
+	 * @param {Number} originalFieldId 
+	 * @param {string} newFieldHtml 
+	 * @returns {void}
+	 */
 	function maybeDuplicateUnsavedOptions( originalFieldId, newFieldHtml ) {
 		const newFieldId = jQuery( newFieldHtml ).attr( 'data-fid' );
 		const newOptsContainer  = document.getElementById( `frm_field_${newFieldId}_opts` );
@@ -2171,12 +2178,24 @@ function frmAdminBuildJS() {
 		copyUnsavedOptions( args )
 	}
 
+	/**
+	 * Syncs the options editing elements used to add,modify or delete options in the field options area.
+	 *
+	 * @param {HTMLElement} origOptsContainer 
+	 * @param {HTMLElement} newOptsContainer 
+	 * @param {object} args 
+	 * @returns {void}
+	 */
 	function copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args ) {
-		const origOpts = origOptsContainer.querySelectorAll( 'li' );
+		const originalOpts = origOptsContainer.querySelectorAll( 'li' );
+
+		if ( ! originalOpts ) {
+			return;
+		}
 
 		const { originalFieldId, newFieldId } = args;
 
-		for ( li of origOpts ) {
+		for ( li of originalOpts ) {
 			const newOptLi         = replaceElementAttribute( li, args );
 			const originalOptValue = li.querySelector( `.field_${originalFieldId}_option` );
 			const newOptValue      = newOptLi.querySelector( `.field_${newFieldId}_option` );
@@ -2196,6 +2215,12 @@ function frmAdminBuildJS() {
 		}
 	}
 
+	/**
+	 * Syncs the options in the form preview area.
+	 *
+	 * @param {object} args 
+	 * @returns {void}
+	 */
 	function copyUnsavedOptions( args ) {
 		const { originalFieldId, newFieldId } = args;
 

From 97bfaf8137d363e15a68de92ed9320ccfd5d2f04 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:16:12 +0300
Subject: [PATCH 10/17] Fix eslint errors

---
 js/formidable_admin.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index d1d1ca9c37..0db98a9646 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2154,8 +2154,8 @@ function frmAdminBuildJS() {
 	/**
 	 * Duplicates field options that are not saved after being modified to the new field.
 	 *
-	 * @param {Number} originalFieldId 
-	 * @param {string} newFieldHtml 
+	 * @param {Number} originalFieldId
+	 * @param {string} newFieldHtml
 	 * @returns {void}
 	 */
 	function maybeDuplicateUnsavedOptions( originalFieldId, newFieldHtml ) {
@@ -2175,15 +2175,15 @@ function frmAdminBuildJS() {
 
 		copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args );
 
-		copyUnsavedOptions( args )
+		copyUnsavedOptions( args );
 	}
 
 	/**
 	 * Syncs the options editing elements used to add,modify or delete options in the field options area.
 	 *
-	 * @param {HTMLElement} origOptsContainer 
-	 * @param {HTMLElement} newOptsContainer 
-	 * @param {object} args 
+	 * @param {HTMLElement} origOptsContainer
+	 * @param {HTMLElement} newOptsContainer
+	 * @param {object} args
 	 * @returns {void}
 	 */
 	function copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args ) {
@@ -2218,7 +2218,7 @@ function frmAdminBuildJS() {
 	/**
 	 * Syncs the options in the form preview area.
 	 *
-	 * @param {object} args 
+	 * @param {object} args
 	 * @returns {void}
 	 */
 	function copyUnsavedOptions( args ) {

From 8cf8478bf8daba35a4adc4bd11509f06095037bf Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Mon, 18 Mar 2024 18:26:48 +0300
Subject: [PATCH 11/17] Add let and use div()

---
 js/formidable_admin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 0db98a9646..c9c28e174c 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2195,7 +2195,7 @@ function frmAdminBuildJS() {
 
 		const { originalFieldId, newFieldId } = args;
 
-		for ( li of originalOpts ) {
+		for ( let li of originalOpts ) {
 			const newOptLi         = replaceElementAttribute( li, args );
 			const originalOptValue = li.querySelector( `.field_${originalFieldId}_option` );
 			const newOptValue      = newOptLi.querySelector( `.field_${newFieldId}_option` );
@@ -2245,7 +2245,7 @@ function frmAdminBuildJS() {
 		let elementString = element.outerHTML.replace( regex, newFieldId );
 		regex             = new RegExp( originalFieldKey, 'g' );
 		elementString     = elementString.replace( regex, newFieldKey );
-		const tempDiv     = document.createElement( 'div' );
+		const tempDiv     = div();
 		tempDiv.innerHTML = elementString;
 
 		return  tempDiv.firstChild;

From 1642c9b07794727e8f5fe500dcc3424db18b2d87 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Tue, 19 Mar 2024 12:40:32 +0300
Subject: [PATCH 12/17] Remove extra space

---
 js/formidable_admin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index c9c28e174c..b21e3e3b49 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2248,7 +2248,7 @@ function frmAdminBuildJS() {
 		const tempDiv     = div();
 		tempDiv.innerHTML = elementString;
 
-		return  tempDiv.firstChild;
+		return tempDiv.firstChild;
 	}
 
 	function maybeDuplicateUnsavedSettings( originalFieldId, newFieldHtml ) {

From 4735b6ccdbf919e7f7cf3727f51dd3fc5ebeb597 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:00:22 +0300
Subject: [PATCH 13/17] Improve regex pattern used to replace field id and keys

---
 js/formidable_admin.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 6728766af3..2c323fba92 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2261,10 +2261,12 @@ function frmAdminBuildJS() {
 	function replaceElementAttribute( element, args ) {
 		const { originalFieldId, originalFieldKey, newFieldId, newFieldKey } = args;
 
-		let regex         = new RegExp( originalFieldId, 'g' );
-		let elementString = element.outerHTML.replace( regex, newFieldId );
-		regex             = new RegExp( originalFieldKey, 'g' );
-		elementString     = elementString.replace( regex, newFieldKey );
+		let regex         = new RegExp( `_${originalFieldId}`, 'g' );
+		let elementString = element.outerHTML.replace( regex, `_${newFieldId}` );
+		regex             = new RegExp( `"${originalFieldId}"`, 'g' );
+		elementString     = elementString.replace( regex, `"${newFieldId}"` );
+		regex             = new RegExp( `_${originalFieldKey}`, 'g' );
+		elementString     = elementString.replace( regex, `_${newFieldKey}` );
 		const tempDiv     = div();
 		tempDiv.innerHTML = elementString;
 

From e29dc28b8d95d66f568c75842463f91102a5d64c Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:02:02 +0300
Subject: [PATCH 14/17] Consider optional chaining with DOM queries

---
 js/formidable_admin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 2c323fba92..5ef92a346e 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2244,8 +2244,8 @@ function frmAdminBuildJS() {
 	function copyUnsavedOptions( args ) {
 		const { originalFieldId, newFieldId } = args;
 
-		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
-		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` ).querySelector( '.frm_opt_container' );
+		const originalFieldOpts = document.getElementById( `field_${originalFieldId}_inner_container` )?.querySelector( '.frm_opt_container' );
+		const newFieldOpts      = document.getElementById( `field_${newFieldId}_inner_container` )?.querySelector( '.frm_opt_container' );
 
 		if ( ! originalFieldOpts || ! newFieldOpts ) {
 			return;

From 4abc8a325a563d25b7a7af52a5e31e453642a064 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:03:40 +0300
Subject: [PATCH 15/17] Fix JSDoc spacing

---
 js/formidable_admin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 5ef92a346e..47eaff2b86 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2203,7 +2203,7 @@ function frmAdminBuildJS() {
 	 *
 	 * @param {HTMLElement} origOptsContainer
 	 * @param {HTMLElement} newOptsContainer
-	 * @param {object} args
+	 * @param {object}      args
 	 * @returns {void}
 	 */
 	function copyUnsavedDeleteOptions( origOptsContainer, newOptsContainer, args ) {

From e88a5432f35ed8eb0cd2ea1fc3fda5aec801e89d Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:04:45 +0300
Subject: [PATCH 16/17] Avoid potential false positives in regex replacements

---
 js/formidable_admin.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 47eaff2b86..46fcbac3d7 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2260,19 +2260,37 @@ function frmAdminBuildJS() {
 
 	function replaceElementAttribute( element, args ) {
 		const { originalFieldId, originalFieldKey, newFieldId, newFieldKey } = args;
+		let elementString = element.outerHTML;
+		for ( const endChar of [ '-', '"', ']', '_' ] ) {
+			elementString = replaceFieldIdPatterns( elementString, originalFieldId, newFieldId, endChar );
+		}
+		elementString = replaceFieldIdPatterns( elementString, originalFieldId, newFieldId, '"', '"' );
+		elementString = replaceFieldIdPatterns( elementString, originalFieldKey, newFieldKey, '-' );
 
-		let regex         = new RegExp( `_${originalFieldId}`, 'g' );
-		let elementString = element.outerHTML.replace( regex, `_${newFieldId}` );
-		regex             = new RegExp( `"${originalFieldId}"`, 'g' );
-		elementString     = elementString.replace( regex, `"${newFieldId}"` );
-		regex             = new RegExp( `_${originalFieldKey}`, 'g' );
-		elementString     = elementString.replace( regex, `_${newFieldKey}` );
 		const tempDiv     = div();
 		tempDiv.innerHTML = elementString;
 
 		return tempDiv.firstChild;
 	}
 
+	/**
+	 * Replaces original field id/key prepended by startChar and followed by endChar with new field id/key.
+	 *
+	 * @since x.x
+	 *
+	 * @param {string} elementString
+	 * @param {Number|string} originalFieldId
+	 * @param {Number|string} newFieldId
+	 * @param {string} endChar
+	 * @param {string} startChar
+	 *
+	 * @return {string}
+	 */
+	function replaceFieldIdPatterns( elementString, originalFieldId, newFieldId, endChar, startChar = '_' ) {
+		const regex = new RegExp( `${startChar}${originalFieldId}${endChar}`, 'g' );
+		return elementString.replace( regex, `${startChar}${newFieldId}${endChar}` );
+	}
+
 	function maybeDuplicateUnsavedSettings( originalFieldId, newFieldHtml ) {
 		var originalSettings, newFieldId, copySettings, fieldOptionKeys, originalDefault, copyDefault;
 

From 8736115fafb28ed1dce6dad0aae64ad6b3d416e6 Mon Sep 17 00:00:00 2001
From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:07:18 +0300
Subject: [PATCH 17/17] Fix JSDoc error

---
 js/formidable_admin.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/formidable_admin.js b/js/formidable_admin.js
index 46fcbac3d7..bed18b7214 100644
--- a/js/formidable_admin.js
+++ b/js/formidable_admin.js
@@ -2278,11 +2278,11 @@ function frmAdminBuildJS() {
 	 *
 	 * @since x.x
 	 *
-	 * @param {string} elementString
+	 * @param {string}        elementString
 	 * @param {Number|string} originalFieldId
 	 * @param {Number|string} newFieldId
-	 * @param {string} endChar
-	 * @param {string} startChar
+	 * @param {string}        endChar
+	 * @param {string}        startChar
 	 *
 	 * @return {string}
 	 */