I am trying to add 1 to any newly appended id/class:

jQuery:

```
$(function(){
$("#add-new-student").click(function() {

$("ul#student-list").append('<li class="student3"/>Student</li>');
$("div#student-courses").append('<div id="student3" class="student-information">'
+ '<div id="student3-enrolled-courses">'
+ '<span class="english">English</span>'
+ '<span class="technology">Technology</span>'
+ '</div>'
+ '</div>'
);

});
});

```

HTML:

```
<input type="submit" id="add-new-student" value="Add New Student">

<ul id="student-list">
<li class="student1"/>Student</li>
<li class="student2"/>Student</li>
</ul>

<div id="student-courses">
<div id="student1" class="student-information">
<div id="student1-enrolled-courses">
<span class="english">English</span>
<span class="technology">Technology</span>
</div>
</div>

<div id="student2" class="student-information">
<div id="student2-enrolled-courses">
<span class="english">English</span>
<span class="technology">Technology</span>
</div>
</div>
</div>

```

I set up two fiddles:  

<http://jsfiddle.net/KHfyY/> uses after instead of append and finds the div.student-information:last  

<http://jsfiddle.net/KHfyY/1/> uses the code here with append for both

Whichever one is best for this should be the one we can use.

If there are no students, then the first class/id's should be student1. If there are students as in the code, it should increment it by 1 based on the last student number. Any idea how this can be done?