How to find each next element with specific class name using jQuery?
<p>I have a html structure in my webpage as below :</p>

<pre><code>&lt;div class="group_name"&gt;Group A&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 1&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 2&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 3&lt;/div&gt;

&lt;div class="group_name"&gt;Group B&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 1&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 2&lt;/div&gt;
&lt;div class="student_name"&gt;Studen 3&lt;/div&gt;

..
.
.
</code></pre>

<p>Now this structure is dynamically generated using PHP. What I want to do is, I want to add below code as a last element of "Group A" :</p>

<pre><code>&lt;div class="student_name"&gt;Studen 4&lt;/div&gt;
</code></pre>

<p>But I want to add it using jQuery, as I am getting this "Student 4" record as a Ajax response string. So the div is getting added based on the Group Name. At the moment I have used static value for group name as "Group A". So the Javascript will be something like below :</p>

<pre><code>$(".group_name").each(function(index){
    var group_name = $(this).text();

    if(group_name=='Group A'){
          // Add Student 4 to last position of this group
    }
});
</code></pre>

<p>So this way I am already selecting the "Group A" element. But now I want to add "Student 4" as the last entry in that group (below "Student 3").
How can I do this ?</p>

<p>Thanks in advance.</p>
