diff --git a/src/Element/WebformJavaScriptSetting.php b/src/Element/WebformJavaScriptSetting.php
index c7ae4b665c07d1f40e328ecbca2a89fcff254cd9..b450e9abba12ed2b95b385ad6cdf37e3ad4603dc 100644
--- a/src/Element/WebformJavaScriptSetting.php
+++ b/src/Element/WebformJavaScriptSetting.php
@@ -5,7 +5,7 @@ namespace Drupal\webform_javascript_setting\Element;
 use Drupal\Core\Render\Element\Hidden;
 
 /**
- * Provides a webform element tat store a JavaScript setting in a hidden input.
+ * Provides a webform element that stores a JavaScript setting in a hidden input.
  *
  * @FormElement("webform_javascript_setting")
  */
@@ -25,7 +25,12 @@ class WebformJavaScriptSetting extends Hidden {
    */
   public static function preRenderHidden($element) {
     $element = parent::preRenderHidden($element);
-    $element['#attributes']['data-webform-javascript-setting'] = $element['#javascript_setting'];
+
+    /** @var \Drupal\webform\WebformThirdPartySettingsManagerInterface $third_party_settings_manager */
+    $third_party_settings_manager = \Drupal::service('webform.third_party_settings_manager');
+    $settings = $third_party_settings_manager->getThirdPartySetting('webform_javascript_setting', 'settings');
+    $javascript_setting = $settings[$element['#javascript_setting']] ?? [];
+    $element['#attributes']['data-webform-javascript-setting'] = $javascript_setting['setting'] ?? $element['#javascript_setting'];
     $element['#attached']['library'][] = 'webform_javascript_setting/webform_javascript_setting';
     return $element;
   }
diff --git a/src/Plugin/WebformElement/WebformJavaScriptSetting.php b/src/Plugin/WebformElement/WebformJavaScriptSetting.php
index 223668b4ff5a6afaed092b0a9f3da598fa5974f1..1c594442340d099580aeafb4c17be78a1019f408 100644
--- a/src/Plugin/WebformElement/WebformJavaScriptSetting.php
+++ b/src/Plugin/WebformElement/WebformJavaScriptSetting.php
@@ -55,12 +55,12 @@ class WebformJavaScriptSetting extends TextBase {
     $settings = $third_party_settings_manager->getThirdPartySetting('webform_javascript_setting', 'settings');
 
     $options = [];
-    foreach ($settings as $setting) {
+    foreach ($settings as $name => $setting) {
       $t_args = [
         '@label' => $setting['label'],
         '@setting' => $setting['setting'],
       ];
-      $options[$setting['setting']] = $this->t('@label (@setting)', $t_args);
+      $options[$name] = $this->t('@label (@setting)', $t_args);
     }
     $form['element']['javascript_setting'] = [
       '#type' => 'select',
diff --git a/tests/modules/webform_javascript_setting_test/config/install/webform.webform.test_webform_javascript_setting.yml b/tests/modules/webform_javascript_setting_test/config/install/webform.webform.test_webform_javascript_setting.yml
index eb6334d438e95f7b1a75f860d3b1e808d578b7b7..9680333a1b4d71cb35fd8c4ff9be204d531ac20f 100644
--- a/tests/modules/webform_javascript_setting_test/config/install/webform.webform.test_webform_javascript_setting.yml
+++ b/tests/modules/webform_javascript_setting_test/config/install/webform.webform.test_webform_javascript_setting.yml
@@ -15,7 +15,7 @@ elements: |-
   webform_javascript_setting:
     '#type': webform_javascript_setting
     '#title': webform_javascript_setting
-    '#javascript_setting': drupalSettings.user.uid
+    '#javascript_setting': drupal_user_id
 css: ''
 javascript: ''
 settings:
diff --git a/webform_javascript_setting.install b/webform_javascript_setting.install
index 02548c7d561807787b18882678af588036af29e8..e915b35d098407ab415fef6514b61cbfdce7ecae 100644
--- a/webform_javascript_setting.install
+++ b/webform_javascript_setting.install
@@ -17,7 +17,7 @@ function webform_javascript_setting_install(bool $is_syncing): void {
 
   // Acquia Personalization: Client ID.
   if (\Drupal::moduleHandler()->moduleExists('acquia_perz')) {
-    $settings[] = [
+    $settings['acquia_client_id'] = [
       'setting' => 'AcquiaLift.liftWebIdentity.tc_ptid',
       'label' => 'Acquia Personalization: Client ID',
     ];
@@ -25,7 +25,7 @@ function webform_javascript_setting_install(bool $is_syncing): void {
 
   // Include Drupal: User ID as an example.
   if (empty($settings)) {
-    $settings[] = [
+    $settings['drupal_user_id'] = [
       'setting' => 'drupalSettings.user.uid',
       'label' => 'Drupal: User ID',
     ];
diff --git a/webform_javascript_setting.module b/webform_javascript_setting.module
index c52ccce2cfe17c56c86214b94cb00872e742cf30..1d2b77101f39e7bc568c9e507b83c43fcb7224f3 100644
--- a/webform_javascript_setting.module
+++ b/webform_javascript_setting.module
@@ -29,7 +29,17 @@ function webform_javascript_setting_webform_admin_third_party_settings_form_alte
     '#default_value' => $settings,
     '#header' => TRUE,
     '#required' => TRUE,
+    '#key' => 'name',
     '#element' => [
+      'name' => [
+        '#type' => 'textfield',
+        '#title' => t('Name'),
+        '#title_display' => 'invisible',
+        '#placeholder' => t("Enter the name"),
+        '#pattern' => '^[a-zA-Z_]+$',
+        '#required' => TRUE,
+        '#error_no_message' => TRUE,
+      ],
       'setting' => [
         '#type' => 'textfield',
         '#title' => t('Setting'),