Can't find the selectors of a fixed header table

Question

Original Table Example

Example with Fixed Table Header

The first example shows a comparison table that displays data dynamically in a column on click. When the table is full, it'll remove .addinfo class and go back to the second column to replace old data. The problem comes in when I try to use a fixed header plugin from this page . It creates a second thead to allow th to be fixed at the top, like this:

<table id="toptable" style="padding: 0px;">
<thead class="Original">
    <tr>
        <th style="visibility:hidden">-</th>
        <th class="image addinfo">Fdw</th>
    </tr>
 </thead>

<thead class="Floating" style="display: none;">  //Second Thead//
    <tr>
        <th style="visibility:hidden">-</th>
        <th class="image addinfo">Fdw</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td class="description">Name</td>
        <td class="description addinfo">Fdw</td>

    </tr>
    <tr>
        <td class="title">Age</td>
        <td class="title addinfo">Fdw</td>

    </tr>
        <tr>
        <td class="title">Age</td>
        <td class="title addinfo">Fdw</td>
    </tr>
 <tbody>
</table>

As you see in the second example, it can't remove the class .addinfo when the table is full. I guess I need to change the table selectors in the script to get it to work. Can someone tell me which table selectors I should change?

This code only works for the first example:

$(function () {
    function filltable(buttontext) {
        var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;

        i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
            .addClass('addinfo').html(buttontext);
    }

    $('.area').each(function () {
        var area = $(this),
            button = $(this).find('button'),
            buttontext = button.text();
        button.on("click", function () {
            var allCells = $('table').find('th').length-1;
            var fullCells = $('table th.addinfo').length;
            console.log(allCells, fullCells);
            if (allCells === fullCells) { // If table is full
                $('table .addinfo').removeClass('addinfo');
                filltable(buttontext);
            } else { // If table isn't full
                filltable(buttontext);
            }
        });
    });
});

First Example Markup

    <div class="area">
    <button>Gah</button>
</div>
<div class="area">
    <button>Kaj</button>
</div>
<div class="area">
    <button>Fdw</button>
</div>
<div class="area">
    <button>ffdf</button>
</div>
<table>
    <thead>
        <tr>
            <th>Placeholder</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Age</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Nationality</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Education</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Background</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Language</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 1

Change

var allCells = $('#toptable').find('th').length - 1;

To

var allCells = $('#toptable').find('th').length - 2;

JS FIDDLE DEMO