Student Information

attempting to link student id names to their own cards

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=CourseInfo.js"></script>
<script id="studentTemplate" type="text/x-jquery-tmpl"> 
    <li class="studentCard">
        <h2>Student Name: <a href="mailto:${Email}">${LName + ", " + FName}</a></h2>
        <h3>Student Information</h3>
        <p><strong>Student ID:</strong> ${ID}</p>
        <p><strong>Phone:</strong> ${Phone}</p>
        <p><strong>Fax:</strong> ${Fax}</p>
        <p><strong>Location:</strong> ${City}, ${State}</p>
        <p><strong>Notes: </strong>${Notes}</p>        
        <p><strong>Group Partners:</strong></p>
        <ul class="partners">
            <li>
                <span class="partnerName">${partnerNames[0]}</span>
                <p>
                    <span id="${partnerIDs[0]}" class="viewLink">View</span>
                    <a href="mailto:${partnerEmail[0]}" class="emailLink">Email</a>
                </p> 
            </li>   
            <li>
                <span class="partnerName">${partnerNames[1]}</span>
                <p>
                    <span id="${partnerIDs[1]}" class="viewLink">View</span>
                    <a href="mailto:${partnerEmail[1]}" class="emailLink">Email</a>
                </p>
            </li>   
            <li>
                <span class="partnerName">${partnerNames[2]}</span>
                <p>
                    <span id="${partnerIDs[2]}" class="viewLink">View</span>
                    <a href="mailto:${partnerEmail[2]}" class="emailLink">Email</a>
                </p>
            </li>   
            <li>
                <span class="partnerName">${partnerNames[3]}</span>
                <p>
                    <span id="${partnerIDs[3]}" class="viewLink">View</span>
                    <a href="mailto:${partnerEmail[3]}" class="emailLink">Email</a>
                </p>
            </li>   
        </ul>
        <h3...

CSS

body {
    font-family:Helvetica,Arial,Verdana,sans-serif;
    font-size: 12px;
    color:#444;
}

a {
    color:#1A6067;
    text-decoration:none;
}

a:hover {
    text-decoration:underline !important;
}

label {
    font-weight:bold;
    font-size:1.25em;
}

li {
    display:block;
    border:1px solid #666;
    margin:1em auto;
    padding:.5em;
    width:80%;
}

table, th, td {
    border: 1px solid #CCC;
}

table {
    margin:.75em auto;
}

th, h1, h2, h3, h4 {
    font-weight:bold;
    text-transform:uppercase;
}

strong {
    font-weight:bold;
}

h1 {
    font-size:2em;
}

h2 {
    margin:0 auto 1em auto;
    font-size:1.75em;
}

h3 {
    margin:.75em auto;
    font-size:1.5em;
}

h4 {
    font-size:1.25em;
}

p {
    margin:.5em auto;
}


th, td {
    padding: 5px;
}

.header, .average {
    background-color:#EEFBF7;
    color:#313131;
}

.homework {
    width:80%;
    margin:.75em auto;
}

.partners {
    display:block;
    clear:both;
    width:auto;
    margin:0 auto;
    overflow:hidden;
}

.partners li {
    display:block;
    float:left;
    width:20.75%;
    height:4em;
    margin:2px;
    border:1px solid #CCC;
    text-align:center;
}

.partnerName {
    display:block;
    height:2.5em;
    padding-bottom:2px;
    margin-bottom:2px;
    border-bottom:1px dotted #DDD;
}

.emailLink, .viewLink {
    display:block;
    float:left;
    cursor:pointer;
    text-align:center;
    font-weight:bold;
    color:#1A6067;
}

.emailLink { float:right; }

JavaScript

function fillOption() {
    for (var index = 0; index < students.length; index++) {
        var student = students[index];
        var idNo = student.ID;
        var fName = student.FName;
        var lName = student.LName;
        var option = '<option class="studentOption" value="' + idNo + '">' + lName + ', ' + fName + '</option>';
        $('#idSelect').append(option);
    }
}

function fillCard(event) {
    var tgtType = event.target;
    var tgt;
    if (tgtType.nodeName == "SELECT") {
        tgt = $(this).attr('value');
    } else if (tgtType.nodeName == "SPAN") {
        tgt = $(this).attr('id');
    }
    for (var index = 0; index < students.length; index++) {
        var student = students[index];
        if (tgt == student.ID) {
            var partner = student.Partners;
            var partnerArr = partner.split(',');
            var partnerNames = [];
            var partnerEmails = [];
            for (var j = 0; j < partnerArr.length; j++) {
                var partnerId = partnerArr[j];
                for (var i = 0; i < students.length; i++) {
                    var studentIdArr = students[i];
                    if (partnerId == studentIdArr.ID) {
                        var partnerName = studentIdArr.LName + ', ' + studentIdArr.FName;
                        var partnerEmail = studentIdArr.Email;
                        partnerNames[j] = partnerName;
                        partnerEmails[j] = partnerEmail;
                    }
                }
            }

            var quizTotal = 0;
            var quizAvg;
            var quizArr = student.Quizzes;
            for (var k = 0; k < quizArr.length; k++) {
                var quizGrade = quizArr[k] * 1;
                quizTotal = quizTotal + quizGrade;
            }
            quizAvg = quizTotal / quizArr.length;
            var HWTotal = 0;
            var HWAvg = 0;
            for (var l = 1; l < 5; l++) {
                var HWNo = 'HW' + l;
                HWTotal = HWTotal +...