I believe this code should be working but it does not appear to be

{% extends "layout.html" %}
{% block javascript %}
    <script type="text/javascript" charset="utf-8">
    $('#email').change(function () {
      var len = $('#email').val().length;
      if (len > 0) {
          $("#user_accounts").fadeOut(1)
      } else {
          $("#user_accounts").fadeIn(1)

      }
  });
    </script>
{% endblock %}
{% block body %}
<!-- About Section -->
    <section id="about"  class="bg-light-gray">
        <div class="container">

I am trying to hide a div #user_accounts if an text input field contains any text. There are no error messages when debugging and user_accounts is not fading.

here is the html i'm using

                        <br>
                        Add user to accounts: <input id='email' type="text" placeholder="user@email.com">
                        <br><br>
                        <div id="user_accounts">
                        {% for item in accounts %}
                            <div class="col-md-4">
                                <div class="pull-left"><input type="checkbox" name="accounts" id="accounts" value="{{ item[0] }}" {% if item[0] not in muted %}checked{% endif %}>
                                    {{ item[0] }} - <span title="{{item[1]}}">{{item[1] | truncate(20, True) }}</span>
                                </div>
                            </div>
                        {% endfor %}
                        </div>