Coffeescript changes class for all radio forms instead of for just the one that was changed

Coffeescript changes class for all radio forms instead of for just the one
that was changed

I have a series of radio buttons in groups of three (for each step of a
quiz). If the radio button chosen is "video", I would like to show the
"videoCreator" div. If it is "excel", the "excelCreator" div, etc. These
divs are just additional form items below the radio buttons to allow the
user to enter more information.
My problem is that the coffeescript below works, except that it changes
all of the radio forms. For example lets say step 1 is video, and the
video div shows. If I change step 2 to the excel radio button, the excel
div shows for all steps (radio forms) including the first, which was
supposed to stay video. I think I need to create a variaable, but I am not
sure. Any help would be appreciated.
Coffeescript
$(".excelCreator").hide()
$(".videoCreator").hide()
$(".mcCreator").hide()
$(".stepRadio").change ->
if @value is "video" and @checked
$(".videoCreator").show()
else if @value is "excel" and @checked
$(".excelCreator").show()
else if @value is "multiple_choice" and @checked
$(".mcCreator").show()
else
$(".excelCreator").hide()
$(".videoCreator").hide()
$(".mcCreator").hide()
Here is the show template with the radio buttons
<div>
<div>
<%= f.label :media_type, "Excel" %>
<%= f.radio_button :media_type, 'excel', :checked => true, class:
'icheck stepRadio' %>
</div>
<div>
<%= f.label :media_type, "Video" %>
<%= f.radio_button :media_type, 'video', class: 'icheck stepRadio' %>
</div>
<div>
<%= f.label :media_type, "Multiple Choice" %>
<%= f.radio_button :media_type, 'multiple_choice', class: 'icheck
stepRadio' %>
</div>
</div>
Here is the options I would like shown based upon the radio buttons above
in the same view
<div class="excelCreator">
<%= f.label :link, "Excel Link" %>
<%= f.text_field :link, :style => "width: 98%;" %>
<%= f.label :answer, "Excel Answer (#)" %>
<%= f.text_field :answer, :style => "width: 98%;" %>
</div>
<div class="videoCreator">
<%= f.label :link, "Video Link" %>
<%= f.text_field :link, :style => "width: 98%;" %>
</div>
<div class="mcCreator">
<%= f.label :choice_one, "Choice One" %>
<%= f.text_field :choice_one, :style => "width: 98%;" %>
<%= f.label :choice_two, "Choice Two" %>
<%= f.text_field :choice_two, :style => "width: 98%;" %>
<%= f.label :choice_three, "Choice Three" %>
<%= f.text_field :choice_three, :style => "width: 98%;" %>
<%= f.label :choice_four, "Choice Four" %>
<%= f.text_field :choice_four, :style => "width: 98%;" %>
<%= f.label :answer, "MC Answer (#)" %>
<%= f.text_field :answer, :style => "width: 98%;" %>
</div>
here is an example of the html that is output for one of the form fields
<div>
<label
for="course_levels_attributes_0_steps_attributes_0_media_type">Excel</label>
<input checked="checked" class="icheck stepRadio"
id="course_levels_attributes_0_steps_attributes_0_media_type_excel"
name="course[levels_attributes][0][steps_attributes][0][media_type]"
type="radio" value="excel" />
</div>