Toggleable Buttons - Icon - Icon Change - CLONE BUTTON TO ADD MORE

by bizamajig

HTML

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <td>Name</td>
        <td>Check?</td>
    </thead>
    <tr class="ssheetRow">
        <td>
            <input type="text" class="ssheet" value="Foo" />
        </td>
        <td>
            <label for="test1" class="ssheetCheckButton ssheetGetRowId">Bar?</label>
            <input type="checkbox" class="ssheet ssheetRowId checkButton"
            id="test1" checked="checked" />
        </td>
    </tr>
    <tr class="ssheetRow">
        <td>
            <input type="text" class="ssheet" value="Baz" />
        </td>
        <td>
            <label for="test2" class="ssheetCheckButton ssheetGetRowId">Bar?</label>
            <input type="checkbox" class="ssheet ssheetRowId checkButton"
            id="test2" />
        </td>
    </tr>
    <tr class="ssheetRow ssheetNewRow">
        <td>
            <input type="text" class="ssheet" />
        </td>
        <td>
            <label for="test3" class="ssheetCheckButton ssheetGetRowId">Bar?</label>
            <input type="checkbox" class="ssheet ssheetRowId checkButton checkOnly"
            id="test3" />
        </td>
    </tr>
</table>

JavaScript

// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
    if ($(this).prop('checked') === true) {
        $(this).button("option", "icons", {
            secondary: "ui-icon-circle-check"
        });
    } else {
        $(this).button("option", "icons", {
            secondary: "ui-icon-circle-close"
        });
    }
}

// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
    // Identify the row and clone it, including the bound events.
    var row = $(this).closest("tr");
    var table = row.closest("table");
    var newRow = row.clone(true);
    // Set all values (except for buttons) to blank for the new row.
    newRow.find('.ssheet').not('.button').val('');
    // Reinitialize the button
    //newRow.find(".checkButton").button("destroy").button().each(buttonSwitchCheck);
    // Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
    newRow.find('.ssheetRowId').each(function () {
        var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
        var idNum = idArr[2] - 0 + 1;
        var newId = idArr[1] + idNum;
        $(this).attr('id', newId);
        $(this).siblings('label.ssheetGetRowId').attr('for', newId);
    });
    // Add the row to the table.
    newRow.appendTo(table);
    // Remove the old row's ability to create a new row.
    row.removeClass('ssheetNewRow');
}

$(document).ready(function () {
    // Activate jQuery UI checkboxes.
    $(".checkButton").button().each(buttonSwitchCheck);
    $("table").on("change", ".checkButton", buttonSwitchCheck);
    
    // When text is entered on the bottom row, add a new row.
    $("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);
});