diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx
index 60d7896a38..d08ab12674 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx
@@ -30,6 +30,7 @@ function CodeMirrorField({
 
   return (
     <FormGroup
+      id={`${id}-field`}
       fieldId={id}
       helperText={helperText}
       helperTextInvalid={meta.error}
@@ -39,7 +40,7 @@ function CodeMirrorField({
       labelIcon={<FieldTooltip content={tooltip} />}
     >
       <CodeMirrorInput
-        id="webhook-headers"
+        id={id}
         {...rest}
         {...field}
         onChange={value => {
diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
index d945462987..92a9071332 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
@@ -107,6 +107,7 @@ CodeMirrorInput.propTypes = {
   hasErrors: bool,
   fullHeight: bool,
   rows: number,
+  className: string,
 };
 CodeMirrorInput.defaultProps = {
   readOnly: false,
@@ -114,6 +115,7 @@ CodeMirrorInput.defaultProps = {
   rows: 6,
   fullHeight: false,
   hasErrors: false,
+  className: '',
 };
 
 export default CodeMirrorInput;