The problem lies with the structure of the data table in 'index2.html' and the way that Spry utilises that data.
The following shows the first three rows of the table
<tr>
<th>Case name</th>
<th>State</th>
<th>Region</th>
<th>Incident type</th>
<th>Settlement date</th>
<th></th>
</tr>
<tr>
<td>Allen Owen</td>
<td>Florida</td>
<td>Southeast</td>
<td>Oil Spill</td>
<td>11/1/2014</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="6" align="left" valign="top"><img src="ship-2.png" alt="Ship photo" />
<h4>Additional information</h4>
<ul>
<li><a href="#">Case documents</a></li>
<li><a href="#">More information link 1</a></li>
<li><a href="#">More information link 2</a></li>
</ul></td>
</tr>
Spry will regard the first row as a header row, thus no problem.
The second and third rows will be used as data rows, but their structure is not the same. Hence this will confuse Spry and the data will be incorrectly reflected.
The following are the rows in the Spry Region table
<tr>
<th spry:sort="Case_name">Case_name</th>
<th spry:sort="State">State</th>
<th spry:sort="Region">Region</th>
<th spry:sort="Incident_type">Incident_type</th>
<th spry:sort="Settlement_date">Settlement_date</th>
<th></th>
</tr>
<tr spry:repeat="ds1">
<td>{Case_name}</td>
<td></td>
<td></td>
<td>{Incident_type}</td>
<td></td>
<td><div class="arrow"></div></td>
</tr>
Here we have got the header row, thus no problem, but the repeated is going to be a problem. This will repeat the data collected from the data table in 'index2.html', data that we know that Spry has had a problem with.
In other words, the two widgets will not co-operate with each other. A table structure is too restrictive.
You may like to have a look at using Spry's Sliding Panel or using an Accordion instead of using a table.