Control multiple divs from select menu (multiple times on a page)

Question

Trying to show hide multiple divs from a select menu. I have it working fine, except it only works the first time it appears on the page. After that it just shows all the divs.

<script type="text/javascript">
    $(document).ready(function() {
        $('#part_update').change(function() {
            $("#update_form div:not('.alwaysShow')").hide();
            $("#update_form .show" + $('#part_update').val()).show();
        });

        $('#part_update').change(); // simulate a change event to trigger the above
    });
</script>

html:

//WRITE THE ROW WITH THE ADDITIONAL OPTIONS FOR EDITING
echo '<tr id="row'.$list[part_no].'" style="display:none" class="options_row">
    <td colspan="7">
        <form name="fm'.$list[part_no].'" id="update_form" class="updateContainer" method="post" action="process_pm.php">
            <input type="hidden" name="cur_cat" value="'.$_GET[cat].'">
            <input type="hidden" name="show" value="'.$_GET[show].'">
            <input type="hidden" name="pagenum" value="'.$_GET[pagenum].'">
            <input type="hidden" name="findtype" value="'.$_GET[findtype].'">
            <input type="hidden" name="action" value="update"/>
            <input type="hidden" name="part_no" value="'.$list[part_no].'" />
            <div class="alwaysShow">
                <select id="part_update" >
                    <option value="Add" >Add New Inventory</option>
                    <option value="Update">Update Existing Inventory</option>
                </select>
            </div>
            <div class="showAdd" >
                <label for="part_cost">&nbsp;$</label><input type="text" name="part_cost" id="part_cost" class="help" title="Enter Total Invoice Cost" >
            </div>
            <div class="showAdd showUpdate" ><input type="text" name="part_qty" id="part_qty" class="help" title="Enter Qty" ></div>
            <div class="showUpdate" >
                <input name="update_type" type="radio" value="add_qty" checked> Add
                <input name="update_type" type="radio" value="set_qty" > Set
            </div>
            <div class="alwaysShow"><input type="submit" name="submit" class="alwaysShow" value="Submit"></div>
            &nbsp;&nbsp;<a href="javascript:hideDiv(\'row'.$list[part_no].'\');" /><img src="support/btn-update-close.png" />Close</a>
        </form>
    </td>
</tr>';

Answer 1

id s are meant to be unique, ie they should only occur once on the page. What you want to use there is a class instead:

$('.part_update').change(function() {
    /* so on and so forth... */
}

Obviously there's nothing preventing you from using the same id in various spots on the page, but as you can see, it's not going to work.