I am working on a toolset that shows/hides divs. The divs are named
id-1 to id-6.
<div id="id-1">
content
</div>
<div id="id-2">
content
</div>
And so on. The script I have written is below:
<script type="text/javascript">
$(function(){
$('#id-2').hide();
$('#id-3').hide();
$('#id-4').hide();
$('#id-5').hide();
$('#id-6').hide();
$('#add_link').click(function(){
$(this).parent().next('div').show('slow');
});
$('#remove_link').click(function(){
$(this).parent().hide('slow');
});
});
</script>
The beginning part basically just hides div 2-6 on load. The next part
with "#add_link" that adds the next div if needed, and then the last,
removes the current div. This all works, but only on first set.
So basically I have a repeated piece; as below:
<div id="id-1">
<label for="reprint_F1">Identifer 1</label>
<select name="reprint_F1" id="reprint_F1">
<option>- Please Select -</option>
<option value="1">Sec</option>
<option value="2">Row</option>
<option value="3">Seat</option>
<option value="4">Ticket Barcode</option>
<option value="5">RecID</option>
<option value="6">Book No.</option>
<option value="7">Account No.</option>
<option value="8">Other</option>
</select>
<input type="text" name="reprint_F1b" id="reprint_F1b">
<a href="#" id="add_link" class="test ui-state-default ui-corner-
all"><span class="ui-icon ui-icon-plus"></span>Add</a>
</div>
This occurs 6 times, starting on <div id="id-2"> I add another link
for removing that div.
As I said above, they first set works, but after that it doesn't. How
can I get this working so that it works for all 6. I want to try and
avoid writing a function for all six, as in the future I may have to
add in more items.
