jQuery show/hide on option select field showing the box I am trying to show on all other options
<p>I have this jQuery script: </p>

<pre><code>// sorting the names of the fields we're hiding
var timeFieldArray = ["reserveTimeOfDay","choice1TimeOfDay","choice2TimeOfDay","choice3TimeOfDay"];
// show/hide an optional field for the time of day 
$.each(timeFieldArray, function(index, fieldName) 
{   // Start by hiding everything
    $("#"+ fieldName + "Optional").hide();
    $(".toValidate select[name='"+fieldName+"']").click(function() { 
        // is it selected &amp; the correct value? 
        if($("option[value='OtherField']").is(":selected")){
            $("#"+ fieldName + "Optional").show("fast");
            $("input[name='"+fieldName+"Optional']").addClass("required"); 
        } else {
            $("input[name='"+fieldName+"Optional']").removeClass("required");
            $("#"+ fieldName + "Optional").hide();
        }
    }); // closing .Click
}); // closing .Each
</code></pre>

<p>Basically, when the Other option is selected I want to take the correct position from timeFieldArray and show the box that relates to that field. The problem is when I select another option field that is not the OtherFieldvalue these still show up. Any suggestions?</p>

<p>My HTML: </p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;p&gt;&lt;strong&gt;First Choice&lt;/strong&gt;&lt;/p&gt;
        &lt;p&gt;&lt;label for="choice1Date"&gt;Date&lt;/label&gt;&lt;input type="" name="choice1Date" class="dateField required" /&gt;&lt;/p&gt;
        &lt;label for="choice1TimeOfDay"&gt;Time Of Day&lt;/label&gt;
        &lt;select name="choice1TimeOfDay"&gt;
            &lt;option value="am"&gt; Morning (A.M.)&lt;/option&gt;
            &lt;option value="pm"&gt; Afternoon (P.M.)&lt;/option&gt;
            &lt;option value="OtherField"&gt; Other &lt;/option&gt;                     
        &lt;/select&gt;
        &lt;div id="choice1TimeOfDayOptional"&gt;
            Other: &lt;input type="text" name="choice1TimeOfDayOptional" /&gt; 
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Second Choice&lt;/strong&gt;&lt;/p&gt;
        &lt;p&gt;&lt;label for="choice2Date"&gt;Date&lt;/label&gt;&lt;input type="" name="choice2Date" class="dateField required" /&gt;&lt;/p&gt;
        &lt;label for="choice2TimeOfDay"&gt;Time OF Day&lt;/label&gt;
        &lt;select name="choice2TimeOfDay"&gt;
            &lt;option value="am"&gt; Morning (A.M.)&lt;/option&gt;
            &lt;option value="pm"&gt; Afternoon (P.M.)&lt;/option&gt;
            &lt;option value="OtherField"&gt; Other &lt;/option&gt;                     
        &lt;/select&gt;
        &lt;div id="choice2TimeOfDayOptional"&gt;
           Other: &lt;input type="text" name="choice2TimeOfDayOptional" /&gt; 
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;p&gt;&lt;strong&gt;Third Choice&lt;/strong&gt;&lt;/p&gt;
        &lt;p&gt;&lt;label for="choice3Date"&gt;Date&lt;/label&gt;&lt;input type="" name="choice3Date" class="dateField required" /&gt;&lt;/p&gt;
        &lt;label for="choice3TimeOfDay"&gt;Time Of Day&lt;/label&gt;
        &lt;select name="choice3TimeOfDay"&gt;
            &lt;option value="am"&gt; Morning (A.M.)&lt;/option&gt;
            &lt;option value="pm"&gt; Afternoon (P.M.)&lt;/option&gt;
            &lt;option value="OtherField"&gt; Other &lt;/option&gt;                     
        &lt;/select&gt;
        &lt;div id="choice3TimeOfDayOptional"&gt;
           Other: &lt;input type="text" name="choice3TimeOfDayOptional" /&gt; 
        &lt;/div&gt;                                    
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
