Jquery toggle template form

My code doesn't work here, anyone has any idea what's the problem. I don't know where the problem could be, the code looks correct.

<script type="javascript">
$(document).ready(function(){
  $('.new-task').hide();
  $('#addNewTask').click(function(){
      $('.new-task').toggle();
    });
});
</script>

<nav>
 <div>
  <logo>Logo</logo>
  <button id="addNewTask">add newTask</button>
 </div>
</nav>

{{>submitTask}}

<template name="submitTask">
  <div>
    <form class="new-task">
      <textarea name="title" placeholder="Enter Task" rows="10"></textarea>
      <input type="submit" value="Submit" class="button right">
    </form>
  </div>
</template>

Solution

Try this script tag is causing problem

<!DOCTYPE HTML>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.new_task').hide();
      $('#addNewTask').click(function(){
          $('.new_task').toggle();
        });
    });
    </script>
    </head>

    <body>
    <nav>
     <div>
      <logo>Logo</logo>
      <button id="addNewTask">add newTask</button>
     </div>
    </nav>

    <div>
        <form class="new_task">
          <textarea name="title" placeholder="Enter Task" rows="10"></textarea>
          <input type="submit" value="Submit" class="button right">
        </form>
    </div>
    </body>
    </html>