Show/hide dynamic textbox based on pulldown - php

Question

I'm trying to figure out how to have jQuery show/hide a dynamically generated textbox based on a pulldown menu selection. My JS skills are extremely limited. I have the following created in a while loop, depending on the number of people:
<select name="location[<?=$pid?>]" id="location[<?=$pid?>]">
<option value="<?=$loc_id?>" selected><?=$loc_name?> </option>
<option value="Other">Other</option>
<option value="Other">--------</option>
<? $query_loc = mysqli_query($link, "SELECT * FROM locations WHERE loc_app = 'Y' ORDER BY loc_name ASC");
while($fetch_loc = mysqli_fetch_array($query_loc)){
$loc_id = $fetch_loc['loc_id'];
$loc_name = $fetch_loc['loc_name'];
?>
<option value="<?=$loc_id?>"><?=$loc_name?></option>
<?
} ?>
</select>
<input name="location_other[<?=$pid?>]" type="text" id="location_other[<?=$pid?>]" style="display:none" />
jQuery function:
<script type='text/javascript'>
$(window).load(function(){
$('#location').change(function () {
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
});
});
</script>
I need to keep the id of the and the serialized with the $pid variable for later processing. Is there another way to call the jquery function on these?
The HTML output looks like this:
<select name="location[287]" id="location[287]">
<option value="1" selected>A</option>
<option value="Other">Other</option>
<option value="Other">--------</option>
<option value="12">B</option>
<option value="12">C</option>
</select>
<input name="location_other[287]" type="text" id="location_other[287]" style="display:none" />

Answer 1

Try
$(window).load(function(){
$('#location').change(function () {
$('input[id^=location_other]').hide();
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other' + $(this).val()).hide();
}
});
});

Answer 2

Try this
<select name="location[287]" id="location[287]">
<option value="Other">Other</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<input name="location_other[287]" type="text" id="location_other" style="display:none" />
<script type='text/javascript'>
$(window).load(function() {
if ($('select[id^="location"]').val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
$('select[id^="location"]').change(function() {
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
});
});
</script>