jQuery in Brackets Live Preview not working
<p>I have the beginning of I note taking website I am making as an experiment. It was working fine in the live preview from brackets, but then I saved the files and now none of the jQuery works. I think it is my code by it could also be something with Brackets since it only happened once I saved. Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  var notes = [];

  $("#newNoteWrapper").hide();

  $(".text").focus(function() {

    $(this).stop
    $(this).animate({
      marginLeft: "+=3%"
    });

  });
  $(".text").blur(function() {

    $(this).stop
    $(this).animate({
      marginLeft: "-=3%"
    });

  });

  $(".button").hover(function() {

    $(this).stop();
    $(this).animate({
      backgroundColor: "#108cb1"
    }, 200);

  }, function() {

    $(this).stop()
    $(this).animate({
      backgroundColor: "#2DBEEB"
    }, 200);

  });

  $("#newNoteButton").click(function() {

    newNote(true);

  });


  $("#doneButton").click(function() {

    newNote(false);

  });
});

var newNote = function(enter) {

  if enter {
    $("#newNoteWrapper").show();
  } else {
    $("#newNoteWrapper").hide();
    notes.push({
      title: $("#noteTitle").val(),
      body: $("#noteBody").val(),
    });
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #FFFFFF;
  font-family: sans-serif;
}
.button {
  padding: 15px 25px;
  border: none;
  font-size: 25px;
  margin-bottom: 10px;
  background-color: #2DBEEB;
  color: #FFFFFF;
  outline: none;
}
.text {
  border: none;
  outline: none;
  width: 92%;
  border-left: 10px solid #2DBEEB;
  resize: vertical;
  background-color: #FFFFFF;
}
#newNoteButton {
  margin: 10px;
}
#newNoteWrapper {
  z-index: 2;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0%;
}
#newNote {
  background-color: #2DBEEB;
  color: #FFFFFF;
  font-size: 30px;
  padding: 10px;
  text-align: center;
}
#noteTitle {
  font-size: 25px;
  height: 50px;
  margin: 10px 0px 10px 0px;
}
#noteBody {
  font-size: 12pt;
  height: 500px;
  margin: 0px 0px 10px 0px;
}
#doneButton {
  left: 0;
  position: absolute;
  margin-left: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="notes.css"&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"&gt;&lt;/script&gt;
  &lt;script src="notes.js"&gt;&lt;/script&gt;
  &lt;title&gt;Simple Notes&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;button id="newNoteButton" class="button"&gt;new note&lt;/button&gt;
  &lt;div id="newNoteWrapper"&gt;
    &lt;div id="newNote"&gt;new note&lt;/div&gt;
    &lt;form&gt;
      &lt;input type="text" id="noteTitle" class="text" placeholder="title..."&gt;&lt;/input&gt;
      &lt;textarea id="noteBody" class="text" placeholder="body..."&gt;&lt;/textarea&gt;
      &lt;br /&gt;
      &lt;button id="doneButton" class="button"&gt;done&lt;/button&gt;
    &lt;/form&gt;

  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Is there something wrong with this or should I try a different editor?</p>