manually insert start <div> and end <div> tag

manually insert start <div> and end <div> tag

I have requirement to manually insert div tag at select locations, I have shown the html and my requirement, please see if you have a solution

Existing


<table id="f1">
<tr id="t1"><td>First set</td></tr>
<tr><td>set1 content</td></tr>
<tr><td>set1 content</td></tr>
<tr><td>set1 content</td></tr>

<tr id="t1"><td>Second set</td></tr>
<tr><td>set2 content</td></tr>
<tr><td>set2 content</td></tr>
<tr><td>set2 content</td></tr>
</table>

Requirement:
note: row id="t1" is a guid set at runtime, after rendering it would become something like this....
id="t1" would become " t166a08c04-01c6-437b-b187-77058192931a"  and
id="t2" would become  "t157b69c05-34c5-123b-b489-13213112121b"

so I dont have access to exact id, but atleast I know the id would start with t1.


<table id="f1">
<div id="first">
<tr id="t1"><td>First set</td></tr>
<tr><td>set1 content</td></tr>
<tr><td>set1 content</td></tr>
<tr><td>set1 content</td></tr>
</div>

<div id="second">
<tr id="t"><td>Second set</td></tr>
<tr><td>set2 content</td></tr>
<tr><td>set2 content</td></tr>
<tr><td>set2 content</td></tr>
</div>
</table>