I've used [StickyTableHeaders](https://github.com/jmosbech/StickyTableHeaders/) jQuery plugin to have header of my page-wide table stick to the top. I want to add filter box (regular `INPUT` text tag) into table's `TH`. The problem is if I enter the text into the inputbox before the header is cloned (to be "sticky"), the clone doesn't have text I enterd. An vice versa. As far as I can tell there's no event triggered when a html element is hidden/un-hidden. How can I keep the text between original header and cloned "sticky" header synchronized? Either by modifying plugin (I don't know jQuery that well), or non-jQuery way.

```
<table id="xxx">
    <colgroup>
       <col span="1" style="width: 100px" />
       <col span="1" style="width: 200px" />
       <col span="1" />
    </colgroup>
    <thead>
        <tr>
            <th class="bID">ID</th>
            <th class="bStatus"><span class="statusCol">Status</span></th>
            <th class="bSummary">Summary <input type="text" name="firstname"/></th>
        </tr>
    </thead>
    <tbody>
        <tr class="can">
            <td class="bID">...</td>
            <td class="bStatus">...</td>
            <td class="bSummary">...</td>
        </tr>

```

**EDIT:**

`jsfiddle.net/tsLxz` thanks! after it loads, enter any text in the text box, then scroll down -- text disappears from the box; scroll back up - appears again. i understand why, but don't know how to synch.