So, I have this issue that has been bugging me and I just can't seem to fix it. The error that comes up is this: 

> 
> Uncaught Error: Syntax error, unrecognized expression: [{"type":"header","subtype":"h1","label":"Another test form"},{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1497353080484","values":[{"label":"Option 1","value":"option-1","selected":true}]},{"type":"header","subtype":"h1","label":"Header"},{"type":"number","label":"Number","className":"form-control","name":"number-1497353081884"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1497353083345","subtype":"text"}]
> 
> 
> 

I have managed to track down the line of code that is causing this issue, which is this: 

```
        forms = $(document.getElementById('formData').getAttribute("value")),

```

Now, I have no idea why this is causing this issue. The content coming in is correct. This is all being done within a JQuery function, in fact the whole JQuery function looks like this:

```js
jQuery(function($) {
  var $fbEditor = $(document.getElementById('fb-editor')),
  $formContainer = $(document.getElementById('fb-rendered-form')),
  forms = $(document.getElementById('formData').getAttribute("value")),
  fbOptions = {
   formData: forms,
   dataType: 'json',
   onSave: function(){
    $fbEditor.toggle();
    $formContainer.toggle();
    $('form', $formContainer).formRender({
     formData: formBuilder.formData
    });
   }
  },
  formBuilder = $fbEditor.formBuilder(fbOptions);

  $('.edit-form', $formContainer).click(function() {
   $fbEditor.toggle();
   $formContainer.toggle();
  });
 });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```

So, I am not that experienced with JavaScript, JQuery or any of the rest of this. So it could very well be a simple issue but I cannot currently figure out what it is. Can somebody else tell me where I have gone wrong and possibly how to fix it?