JQuery How to hide/show dynamic number of divs all with unique id

Question

I am not very good with JQuery but I am trying to learn. I am rendering number of "Milestone" number fields based on how many "Events" are defined in the database. So for 2 events there will be 2 number fields. What I am having trouble doing is hiding all the fields and only displaying one based on the selection in the "Event" select field. Here are the code snippets:

<div>
<%= f.label "Event" %>
<%= f.select(:event, options_for_select(get_events),{}, { :class => 'form-control', :id => 'event'})%>
<%if any_errors(@attendance_policy, :event) != nil%>
   <%= any_errors(@attendance_policy, :event) %>
<%end%>
</div>
.....
<% Event.all.each do |event| %>
   <div id='<%=event.event_name%>' >
   <%= f.label "Absence Milestone(Make dynamic with selected event)"+event.event_name %>
   <%= f.number_field :absence_milestone, in: 0..event.absence_max.to_i, class: 'form-control' %>
   <%if any_errors(@attendance_policy, :absence_milestone) != nil%>
       <%= any_errors(@attendance_policy, :absence_milestone) %>
   <%end%>          
</div>
<%end%>

Heres my pitiful attempt at JQuery:

$(document).ready(function() {

    $("select#event").bind("change", function() {
        var selected = $("select#event").text();
        $("div#"+selected).show();
    })
})

I understand I have to capture all the divs but I dont know how honestly... You cannot pass ruby arguments to JQuery... The hide them all, Capture text from event selector and only show one which id matches what is selected in the selector..

UPDATE

Working code: Ruby portion not much changed other than me setting class of the div as 'wipe'.

<% Event.all.each do |event| %>
    <div id="<%= event.event_name%>" class="wipe">
    <%= f.label "Absence Milestone" %>
    <%= f.number_field :absence_milestone, in: 0..event.absence_max.to_i, class: 'form-control' %>
    <%if any_errors(@attendance_policy, :absence_milestone) != nil%>
    <%= any_errors(@attendance_policy, :absence_milestone) %>
    <%end%>
    </div>
<%end%>

Here is updated jQuery. I have found another error while testing where my validator would complain that field cannot be blank even though I have entered a value in. Reason behind was that all other hidden fields did not have anything typed in. I updated jQuery to update ALL the hidden fields with value typed in the shown one on focus lost event.

jQuery Working(Might be messy):

$(document).ready(function() {
    $("[class='wipe']").hide();
    var selected = $("select#event").find("option:selected").text();
    $("[id='" + selected + "']").show();
    $("[id='" + selected + "']").on('focusout', function() {

        var input = $(this).find("input").val();
        $('input[type=number]').val(input)
    })
    $("select#event").on('change', function() {
        $("[class='wipe']").hide();
        var selected = $(this).find("option:selected").text();
        $("[id='" + selected + "']").show();
        $("[id='" + selected + "']").on('focusout', function() {

            var input = $(this).find("input").val();
            $('input[type=number]').val(input)
        })
    });

Answer 1

You're close. You should be using .change() instead of .bind() and you need to find the text of the selected option :

 $(document).ready(function() {

   $("select#event").change(function() {
      var selected = $(this).find("option:selected").text();
      $("div#"+selected).show();
    })
 })

.bind() is deprecated

FIDDLE

Answer 2

If I understood right .. You can't do that using Ids Id is unique so you need to use Classes

$("div."+selected)

you can use this code

$(document).ready(function() {
 $('div.hidden').hide();    
 $("select#event").on('change',function() {
        var selected = $(this).val();
        $('div.hidden').hide();
        $('div.'+selected).show()
 });
});

you can check demo

DEMO