How to link Javascript with Rails radio button collection

My goal is to show different set of forms based on which radio button is clicked. No matter what I try I can’t seem to make it work. The forms are hidden, but when I click on the radio button, nothing happens. I believe the cause is the JS code is not linked to the radio button collection — something may be different from JS to simple HTML. I’d really appreciate help.

View

 <%= form.collection_radio_buttons(:number, [["1", '1'] ,["2", '2'], ["3", '3'], ["4", "4"], ["5", "5"], ["6", "6"] ], :first, :last) do |b|  %>
 <%= b.label { b.radio_button + image_tag(b.text+'.png') } %> 
 <% end %>   

JS code

<script type="text/javascript">

    document.getElementById("one").style.display = "none";

    document.getElementById("two").style.display = "none";


$(document).ready(function() {
  $('input[type="radio"][name="number"]').change(function() {
    if (this.value == '1') {
      document.getElementById("one").style.display = "block";
            document.getElementById("two").style.display = "none";

      }
      else if (this.value == '2') {
            document.getElementById("two").style.display = "block";
            document.getElementById("one").style.display = "none";
      }
  });
});
</script>

jQuery (footer)

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

The forms (on the same template as the radio buttons)

        <p id="one" class="one" style="">
          <%= form.text_area :body, class:'', style:"" %>
        </p>

        <p id="two" class="two" style="">
          <%= form.text_area :body, class:'', style:"" %>
        </p>