Conditional form depending on answers in select list not working

Question

i'm building a simple form where input fields are enabled depending on a choice a user makes in a select list. I'm using a little javascript for this.

I get it to work for one condition but there are 2 conditions within the form.
First is a select drop down where depending on one of the two answers 2 input fields appear.
The second is an input field that appears depending on one option chosen in a select list (namely "other")

here is the html:

<div class="form-div1">
<label>Select your profile</label>
<br>
<select>
    <option value="option1">I'm a first-time user</option>
    <option value="option2">I would like to renew or upgrade</option>
</select>

Sorry but my html code is normally longer but it keeps getting cut off by the editor. I assume it's because it encountered a closing div? You can see the full code in the jsfiddle

here is the js:

    $(document).ready(function () {

    $('.form-div2').show();
    $('.form-div3').show();
    $('.form-div4').show();
    $('.form-div42').hide();
    $('.form-div5').show();

    $('#select').change(function () {
        if ($('#select option:selected').text() == "I'm a first-time user") {
            $('.form-div2').show();
            $('.form-div3').show();
        } else if ($('#select option:selected').text() == "I would like to renew or upgrade") {
            $('.form-div2').hide();
            $('.form-div3').hide();
        }
    });

    $('#select').change(function () {
        if ($('#select option:selected').text() == "Other") {
            $('.form-div42').show();
        } else if ($('#select option:selected').text() !== "Other") {
            $('.form-div42').hide();
        }
    });
});

here is the fiddle: http://jsfiddle.net/4EmE5/2/

Hope you can help

Answer 1

Reposting as per Master @Kevin Bowersox supporting comment

Do following changes to your code,

HTML,

<div class="form-div1">
    <label>Select your profile</label>
    <br />
    <select id='user'>
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>
</div>
<div class="form-div2">
    <label>SEN</label>
    <br />
    <input type "text" name="input1" class="input1" />
</div>
<div class="form-div3">
    <label>Email Address</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div4">
    <label>Select your product</label>
    <br>
    <select id='product'>
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>
</div>
<div class="form-div42">
    <label>Specify your product</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div5">
    <label>Select your license</label>
    <br />
    <select>
        <option value="option1">25 users</option>
        <option value="option2">50 users</option>
    </select>
</div>

JS:

$('.form-div2, .form-div3, .form-div4, .form-div5').show();
$('.form-div42').hide();

$('#user').change(function () {
    var selected = $('#user option:selected').text();
    $('.form-div2, .form-div3').toggle(selected == "I'm a first-time user");
});

$('#product').change(function () {
    var selected = $('#product option:selected').text();
    $('.form-div42').toggle(selected == "Other");

});

DEMO