diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index cb787d59c..58d316d52 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -456,7 +456,7 @@ const CodeEditor = createClass({
 		// Close open widgets if click outside of a widget
 		if(!e.target.matches('.CodeMirror-linewidget *')) {
 			for (const widget of this.state.widgets) {
-				this.state.widgetUtils.removeLineWidgets(widget);
+				widget.clear();
 			}
 			this.setState({
 				widgets : []
diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
index d1919a94c..937e7e32b 100644
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
@@ -73,11 +73,13 @@ module.exports = function(CodeMirror, setHints) {
 	};
 
 	return {
+		// checkbox widget
 		cClass : function(cm, n, prefix, cClass) {
 			const { text } = cm.lineInfo(n);
-			const id = `${_.kebabCase(prefix.replace('{{', ''))}-${_.kebabCase(cClass)}-${n}`;
-			const frameChange = (e)=>{
-				if(!!e.target && e.target.checked)
+			const id = _.kebabCase(prefix + '-' + cClass + '-' + n);
+			prefix = `{{${prefix}`;
+			const handleChange = (e)=>{
+				if(e.target?.checked)
 					cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert');
 				else {
 					const start = text.indexOf(`,${cClass}`);
@@ -87,8 +89,8 @@ module.exports = function(CodeMirror, setHints) {
 						e.target.checked = true;
 				}
 			};
-			return <React.Fragment key={`${_.kebabCase(prefix)}-${cClass}-${n}`}>
-				<input type='checkbox' id={id} onChange={frameChange} checked={_.includes(text, `,${cClass}`)}/>
+			return <React.Fragment key={id}>
+				<input type='checkbox' id={id} onChange={handleChange} checked={_.includes(text, `,${cClass}`)}/>
 				<label htmlFor={id}>{_.startCase(cClass)}</label>
 			</React.Fragment>;
 		},
diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js
index 4b994cec7..89a2f0674 100644
--- a/shared/naturalcrit/codeEditor/helpers/widgets.js
+++ b/shared/naturalcrit/codeEditor/helpers/widgets.js
@@ -18,7 +18,7 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		pattern      : PATTERNS.widget[widget.type](widget.name),
 		createWidget : (n, node)=>{
 			const parent = document.createElement('div');
-			const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `{{${widget.name}`, c));
+			const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c));
 			const fieldNames = (widget.fields || []).map((f)=>f.name);
 			const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f);
 			const { text } = cm.lineInfo(n);