I can't quite wrap my head around this one...

A table like the one below is spit out by a renderer from some XML. The XML it comes from has a variable depth. (Please point out if I'm using the rowspans in a horrific manner as well, I just came to this table with some experimentation).

<table border="1">
    <tr>
        <td rowspan="12">> 1</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 2</td>
    </tr>
    <tr>
        <td>1 > 2 > 5</td>
    </tr>
    <tr>
        <td>1 > 2 > 6</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 3</td>
    </tr>
    <tr>
        <td>1 > 3 > 7</td>
    </tr>
    <tr>
        <td>1 > 3 > 8</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 4</td>
    </tr>
    <tr>
        <td>1 > 4 > 9</td>
    </tr>
    <tr>
        <td>1 > 4 > 10</td>
    </tr>
</table>

What I'm trying to accomplish in JQuery is this...

1. User clicks cell "1 > 2" (which will have an ID).
2. An item is dynamically added to the third level, but UNDER "1 > 2 > 6".

What I could do is just add another row underneath "1 > 2" and increase the rowspan from "1 > 2", but the new cell would then appear out of order amongst "1 > 2 > 5" and "1 > 2 > 6".

I don't really need the exact code to do this, just something to stop my head from spinning around this...Thanks!