javascript - ラッパー div を複製せずにテーブル行をラップする方法は?

Question

Wordpress によって生成される次のコードがあります。

<h3>
<span class="title">General Settings:</span>
</h3>
<table class="form-table">
<tbody>
<div class="section_box1"><tr class="section1" valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr><tr class="section1" valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input name="" type="file">
</td>
</tr></div>
<div class="section_box2"><tr class="section2" valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr><tr class="section2" valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr></div>
</tbody>
</table>

今のところ、2 つのセクション (tr.section1 & tr.section2) があります。
ここで、これらのセクションを 2 つの div (.section_box1 & .section_box2) でラップします。

だから私は次のJqueryを使用しています：

//Lets wrap those two sections inside divs ...
$('tr.section1').not($('tr').eq(1)).each(function(){
$(this).add($(this).nextUntil('.section2')).wrapAll('<div class="section_box1"></div>');
});

    $('tr.section2').not($('tr').eq(3)).each(function(){
    $(this).add($(this).nextUntil('.section3')).wrapAll('<div class="section_box2"></div>');
    });

このコードの問題は次のとおりです。セクションに別の設定フィールド (チェックボックスなど) を追加すると、ラッパー div (section_box1 & section_box2) が重複します (明らかにそれを避けたいと思います)。 私の問題を示すためにThis Fiddle

を作成しました。 では、ラッパー div を複製せずにセクションを適切にラップし、ラッパー div の section_box1 と section_box2 内にフィールドを追加するにはどうすればよいでしょうか? 私は今これを数時間作ろうとしていますが、うまくいきません:( よろしくお願いします!!