Adding a New HTML Row to a group inside the HTML table
<p>I have the following table structure: </p>

<pre><code>&lt;table id="myTable"&gt;
    &lt;tr id="myRow" class="content"&gt;
        &lt;td&gt;Option 1&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr class="content"&gt;
        &lt;td&gt;Option 2&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr class="altcontent"&gt;
        &lt;td&gt;file code 1 &lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr class="altcontent"&gt;
        &lt;td&gt;file code 2&lt;/td&gt;
    &lt;/tr&gt;

      &lt;tr class="content"&gt;
        &lt;td&gt;Option 3&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr class="content"&gt;
        &lt;td&gt;Option 4&lt;/td&gt;
    &lt;/tr&gt;

      &lt;tr class="altcontent"&gt;
        &lt;td&gt;file code 3 &lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr class="altcontent"&gt;
        &lt;td&gt;file code 4&lt;/td&gt;
    &lt;/tr&gt;

&lt;/table&gt;

var newContentRow = $("&lt;tr&gt;&lt;/tr&gt;"); 
</code></pre>

<p>I want to add the newContentRow right after Option 2 and Option 4. Of course, this is just an example and there can be many options with many or non file code rows. </p>

<p>Any ideas!</p>

<p><strong>UPDATE 1:</strong> </p>

<p>I updated my code to the following as suggested below: </p>

<pre><code>  var searchClass = "TBLCONTENTS";

    var rows = $("#" + rowId).parent().children("tr");   

    for(i=0;i&lt;rows.length;i++) {


        if ($(rows[i]).attr('class') != searchClass &amp;&amp; $(rows[i]).prev().attr('class') == searchClass) {

            $(rowToBeAdded).addClass("TBLCONTENTS");
            $(rows[i]).before(rowToBeAdded);

   }               
   }
</code></pre>

<p>It even go inside the if check and performs the .before function but I only see the row added to the second group and not the first. </p>
