Hiding div elements within a boothstrap modal
===

I'm trying to use twitter bootstrap modal and jquery to display the number of divs in a modal based on the choice made in a previous drop-down question.  Other words, if 1 is chosen then only one div in the modal is displayed, if 3 is chosen then three divs in the modal are shown.

**Filter question**:

     	<select id='species1'>
    	<option value="">Number of Species</option>
    	<option value="01">1</option>
    	<option value="02">2</option>
    	<option value="03">3</option>
    	<option value="04">4</option>
    	<option value="05">5</option>
    	</select>
	

Here is the **modal script**:

    <div class="modal hide fade in" style = "width:950px; left:25%; display: none; ">
    <div class="modal-header">
    <a class="close" data-dismiss="modal">X</a>
    </div>

    <div class="modal-body">
    <table border=1>
    <div id="ftype1">
    <tr>
    <td colspan=3>
    <h3><center>ITEM 1</center></h3>
    </td>
    </tr>
    <tr>
    <td>
    	<select id='xtype1'>
    	<option value="">Type 1</option>
    	<option value="01">01</option>
    	<option value="02">02</option>
    	<option value="03">03</option>
    	<option value="04">04</option>
    	<option value="05">05</option>
    	</select>
    </td>
    <td>
        Number of pounds: <input type="text" size="5">
    </td>
    <td>
        Cost per pound: <input type="text" size="5">
    </td>
    </tr>
    </div> <!-- ftype1 -->

    <!------------------------------------------------ -->

    <div id="ftype2" class=ftype2>
    <tr>
    <td colspan=3><h3><center>ITEM 2</center></h3></td>
    </tr>
    <tr>
    <td>
    	<select id='xtype2'>
    	<option value="">Type 2</option>
    	<option value="01">01</option>
    	<option value="02">02</option>
    	<option value="03">03</option>
    	<option value="04">04</option>
    	<option value="05">05</option>
    	</select>
    </td>
    <td>
        Number of pounds: <input type="text" size="5">
    </td>
    <td>
        Cost per pound: <input type="text" size="5">
    </td>
    </tr>
    </div> <!-- ftype2 -->

    <!------------------------------------------------ -->

    <div id="ftype3" class=ftype3>
    <tr>
    <td colspan=3><h3><center>ITEM 3</center></h3></td>
    </tr>
    <tr>
    <td>
    	<select id='xtype3'>
    	<option value="">Type 3</option>
    	<option value="01">01</option>
    	<option value="02">02</option>
    	<option value="03">03</option>
    	<option value="04">04</option>
    	<option value="05">05</option>
    	</select>
    </td>
    <td>
        Number of pounds: <input type="text" size="5">
    </td>
    <td>
        Cost per pound: <input type="text" size="5">
    </td>
    </tr>
    </div> <!-- ftype3 -->

    <div class="modal-footer">
    <div class='btn btn-primary'><input name="commit" type="submit" value="Submit" /></div>
    <div class="btn" data-dismiss="modal">Close</div>
    </div>
    </div>


I tried the following **jquery script**:

$(document).ready(function()
{

	$("#nextbttn").click(function()
	{
		var type1 = $('#species1').val();
			if(type1 != '00')
		{
			if(type1 == '01')
			{
				$('.modal').modal({backdrop:false});
				$('#ftype2').hide();
				$('#ftype3').hide();
			}
		}
	});
});

But divs ftype2 and ftype3 are not being hidden.


My question is what the best way to accomplish this??  


Thanks
Chris