HTML - Есть ли правильный элемент контейнера для размещения вокруг строк таблицы?

У меня есть таблица HTML, в которую я хотел бы добавлять или удалять строки динамически, используя поле выбора с некоторым базовым javascript .

Я добавляю не отдельные строки, а группу похожих строк одновременно. Например, если бы у меня уже был один набор, а затем добавил другой, результат был бы таким:

<tr>
<th colspan="2">Item 1</th>
</tr>
<tr>
  <th>Title</th>
  <td>X</td>
</tr>
<tr>
  <th>Description</th>
  <td>Y</td>
</tr>
<tr>
<th colspan="2">Item 2</th>
</tr>
<tr>
  <th>Title</th>
  <td>A</td>
</tr>
<tr>
  <th>Description</th>
  <td>B</td>
</tr>

Чтобы добавить строки, я использую метод клонирования jQuery, поэтому мне нужен какой-то элемент контейнера, чтобы обойти группу row, однако, все, что я пробовал (span, div и т. д.), привело к недопустимому HTML и работало некорректно.

Единственный способ заставить его работать - это сделать каждый набор отдельной таблицей, но на самом деле это не тот эффект, который мне нужен.

Что я могу сделать, чтобы обойти это?