How to get specific table cell data based on another table's data

I have a jsFiddle set up that I've been working on to solve my issue.

$('.docAdminFormSubmit').click(function() {
    buttonClicked = $(this).attr('name');

    if (buttonClicked == 'submitAddClassesToDoc') {
        AddClassesToDoc();
        return false;
    }
});

function AddClassesToDoc() {
    // Check if doc selected in dropdown
    var selectedDocID = '';
    if ($('select#docsList option:selected').val() == 0) {
        alert('No document selected');
        // No doc s开发者_Python百科elected
        return false;
    } else {
        selectedDocID = $('select option:selected').val();
        //alert('selected Doc ID: ' + selectedDocID);
    }

    alert('Selected doc ID: ' + selectedDocID);

    // Check if any classes selected and add them to the array
    var classesToAddToDoc;
    if ($('input.chkAddClass:checked').length) {
        // At least one class checked
        // Get the id(s) of the checked class(es) that aren't already assigned to the selected document
        classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function() {
            var currentClassNumber = $(this).parent('td').next().text();

            alert('Current classID: ' + $(this).val() + ', currentClassNumber: ' + currentClassNumber );
            
            var found = false;

            $('#docsTable a[name="' + selectedDocID + '"]').parent().parent().parent().find('tr.docClassesRow').each(function() {
                alert('Doc\'s current class number: ' + $(this).find('td').last().html());

                if ($(this).find('td').last().html() == currentClassNumber ) {
                    alert('Class number ' + currentClassNumber + ' already assigned');
                    found = true;
                }
            })
            
                if (!found) {
                    alert('Adding ' + $(this).val() + ' to array');
                    return $(this).val();
                }

        }).get();
    } else {
        // No classes checked
        alert('No classes checked');

        return false;
    }

    alert('classesToAddToDoc: ' + classesToAddToDoc);
}

body {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px; }

a.edit:link { color: #000000; }
a.edit:visited { color: #000000; }
a.edit:hover { color: #A04A56; }
a.edit:active { color: #A04A56; }

table { border-collapse: collapse; }

.tableHeader {
    background-color: #A04A56;
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold; }

.edit { font-weight: bold; }

.classRow,
.docRow {
    background-color: #EFE5D3;
    font-size: 1.1em; }

.docAndClassTitle {
    font-weight: bold;
}

.noClasses,
.noDocs { font-style: italic; }

<table id="docsTable" cellpadding="3">
    <thead>
        <tr class="tableHeader">
            <td colspan="2"></td>
            <td width="245px">Document Name</td>
            <td width="410px">Document Description</td>
            <td width="200px">File Name</td>
        </tr>
    </thead>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="55" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="55" /></td>
            <td class="docAndClassTitle">Document 1</td>
            <td>Doc 1 Description</td>
            <td>doc1.pdf</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-55" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-55" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="62" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="62" /></td>
            <td class="docAndClassTitle">Document 2</td>
            <td>Doc 2 Description</td>
            <td>doc2.docx</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-62" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="35" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="35" /></td>
            <td class="docAndClassTitle">Document 3</td>
            <td>Doc 3 Description</td>
            <td>doc3.docx</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-35" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="61" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="61" /></td>
            <td class="docAndClassTitle">Document 4</td>
            <td>Doc 4 Description</td>
            <td>doc4.xls</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-61" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-61" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
</table>

<br />
<br />

<strong>Select a document for the classes:</strong>
<select type="select" id="docsList" name="docsList">
    <option id="defaultDocsListItem" value="0">Select a Document...</option>
    <option value="55">Document 1</option>
    <option value="62">Document 2</option>
    <option value="35">Document 3</option>
    <option value="61">Document 4</option>            
</select>
<input type="submit" id="submitAddClassesToDoc" name="submitAddClassesToDoc" class="docAdminFormSubmit" value="Add Checked Classes to Selected Document" />

<br />
<br />
<br />

<table id="classesTable" cellpadding="3">
    <thead>
        <tr class="tableHeader">
            <td width="30px"></td>
            <td width="100px">Class<br />Number</td>
            <td width="600px">Class Name</td>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="33" /></td>
            <td>CLASS1111</td>
            <td>Class 1 Name</td>
        </tr>
        <tr bgcolor="#EFE5D3">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="153" /></td>
            <td>CLASS2222</td>
            <td>Class 2 Name</td>
        </tr>
        <tr bgcolor="">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
            <td>CLASS3333</td>
            <td>Class 3 Name</td>
        </tr>
    </tbody>
</table>

I need to be able to put together an array of items that are checked in a table, but only if the checked items aren't already associated with what is selected in a dropdown. Not sure if that makes any sense to you, but you should see what I mean when you look at the Fiddle.

Ultimately, when the button is clicked, the final alert in the function should display only the value attribute of the classes that are not already listed in the docTable for the document that is selected in the dropdown.

The OP wrote in an edit:

Thanks for at least checking it out, Levi. Sorry I wasn't clear in explaining what was supposed to happen.

However, I did finally get it to work as desired. Here is a new working jsFiddle. (I screwed up the original one and ended up deleting it.)

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                addSeries: function() {
                    alert ('A series was added, about to redraw chart');
                }
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });


    // activate the button
    $('#button').click(function() {
        var chart = $('#container').highcharts();

        chart.addSeries({
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
        });

        $(this).attr('disabled', true);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">Add series</button>

Here's what's supposed to happen: The user selects an item from the dropdown and then checks the boxes in the table below that to indicate which items in the table he wishes to add to the document. The top table shows what classes are currently assigned to each document.

The purpose of the Fiddle was to put together an array of class IDs from the bottom table, to add to the selected document, but if the user checked an item in the bottom table, and it is already listed for the selected doc in the top table, that class ID should NOT be added to the array.

As I said, the Fiddle linked above is a working example.