Массив JS не определен, несмотря на его объявление

Question

Я пытаюсь использовать комбинацию erb и JS для заполнения массива из флажков.

У меня установлены следующие флажки:

<p class="text-left mt-4 mb-1 font-weight-bold">Subcategories:</p>
<div class="row text-left mb-5">

  <% subcategory_id_array = [] %>

  <% Subcategory.all.each do |sub| %>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck<%= sub.id %>">
        <label class="form-check-label" for="subCheck<%= sub.id %>"><%= sub.name %></label>
    </div>
  <% end %>

  <%= f.hidden_field :subcategory_ids, value: subcategory_id_array %>

</div> <!-- row -->

Который отображается какthis:

<p class="text-left mt-4 mb-1 font-weight-bold">Subcategories:</p>
<div class="row text-left mb-5">


    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck1">
        <label class="form-check-label" for="subCheck1">Passion</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck3">
        <label class="form-check-label" for="subCheck3">Goal Setting</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck2">
        <label class="form-check-label" for="subCheck2">Goal Orientation</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck4">
        <label class="form-check-label" for="subCheck4">Goal Mapping</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck12">
        <label class="form-check-label" for="subCheck12">No Procrastination</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck11">
        <label class="form-check-label" for="subCheck11">Grit</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck5">
        <label class="form-check-label" for="subCheck5">Research</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck6">
        <label class="form-check-label" for="subCheck6">Networking</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck10">
        <label class="form-check-label" for="subCheck10">Habits</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck7">
        <label class="form-check-label" for="subCheck7">Project Management</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck9">
        <label class="form-check-label" for="subCheck9">Self-Scheduling</label>
    </div>
    <div class="form-check col-sm-6 col-md-4 subCheck">
        <input type="checkbox" class="form-check-input" id="subCheck8">
        <label class="form-check-label" for="subCheck8">Productivity</label>
    </div>

  <input value="" type="hidden" name="blog[subcategory_ids]" id="blog_subcategory_ids" />

</div> <!-- row -->

И jquery / js выглядит следующим образом:

<%= content_for :additional_js do %>
  <script>
    $(document).ready(function() {
      $('.subCheck').click(function(){

        var subcategoryArray = [];

        <% Subcategory.all.each do |sub| %>
          if ( $('input#subCheck<%= sub.id %>').is(':checked') ) {
            console.log("Thing<%= sub.id %>");
            subcategoryArray.push(<%= sub.id %>);
          }
        <% end %>

        console.log("Following array should be full:");
        console.log(subcategoryArray);

        $('#subctegory_id_field').val( subcategoryArray );

      });
    });
  </script>
<% end %>

Что выглядит так:

$ (document) .ready (function (function () {

  $('.subCheck').click(function(){

    var subcategoryArray = [];

      if ( $('input#subCheck1').is(':checked') ) {
        console.log("Thing1");
        subcategoryArray.push(1);
      }
      if ( $('input#subCheck3').is(':checked') ) {
        console.log("Thing3");
        subcategoryArray.push(3);
      }
      if ( $('input#subCheck2').is(':checked') ) {
        console.log("Thing2");
        subcategoryArray.push(2);
      }
      if ( $('input#subCheck4').is(':checked') ) {
        console.log("Thing4");
        subcategoryArray.push(4);
      }
      if ( $('input#subCheck12').is(':checked') ) {
        console.log("Thing12");
        subcategoryArray.push(12);
      }
      if ( $('input#subCheck11').is(':checked') ) {
        console.log("Thing11");
        subcategoryArray.push(11);
      }
      if ( $('input#subCheck5').is(':checked') ) {
        console.log("Thing5");
        subcategoryArray.push(5);
      }
      if ( $('input#subCheck6').is(':checked') ) {
        console.log("Thing6");
        subcategoryArray.push(6);
      }
      if ( $('input#subCheck10').is(':checked') ) {
        console.log("Thing10");
        subcategoryArray.push(10);
      }
      if ( $('input#subCheck7').is(':checked') ) {
        console.log("Thing7");
        subcategoryArray.push(7);
      }
      if ( $('input#subCheck9').is(':checked') ) {
        console.log("Thing9");
        subcategoryArray.push(9);
      }
      if ( $('input#subCheck8').is(':checked') ) {
        console.log("Thing8");
        subcategoryArray.push(8);
      }

    console.log("Following array should be full:");
    console.log(subcategoryArray);

    $('#subctegory_id_field').val( subcategoryArray );

  });

});

По сути, JS должен выполнять следующее:

• При нажатии на любой .subCheck, он должен создать новыймассив (в случае, если материал проверен и не отмечен)
• Затем он должен проверить, установлен ли флажок для каждой подкатегории
• Если этот флажок установлен, он должен добавить идентификатор этой подкатегории в массив
• Затем следует обновить скрытое поле (#subcategory_id_field) обновленным массивом для сохранения в базе данных

Код работает нормально до console.log внутри оператора if, но когда он набирает subcategoryArray.push, он говорит, что subcategoryArray не определен ... хотя это так.

Может кто-нибудь увидетьчто я тут не так делаю?