// get all rows that we're interested in (each represent 1 paycheck)
let rows = document.getElementById('check-listings-table').querySelectorAll('tbody tr[role="row"]');

// instantiate the array we'll use for all contributions
var contributions = [];

// loop over each row
for (var i = 0; i < rows.length; i++) {
	// we never actually use this...
	let row = rows[i];
		
	// get the date of the paycheck
	let paycheckDate = rows[i].querySelectorAll('td')[2].innerHTML;

	// info about the paycheck is paired to a button click on the paycheck row
	let expandButton = rows[i].querySelectorAll('input.ess-view');
			expandButton[1].click();

	// assign each paycheck category, we can loop over each as needed
	let earnings = rows[i].nextElementSibling.querySelector('td.extraDetailsRow').querySelectorAll('table')[0],
			taxes = rows[i].nextElementSibling.querySelector('td.extraDetailsRow').querySelectorAll('table')[1],
			deductions = rows[i].nextElementSibling.querySelector('td.extraDetailsRow').querySelectorAll('table')[2],
			netPay = rows[i].nextElementSibling.querySelector('td.extraDetailsRow').querySelectorAll('table')[3];

	var FSA;

	// there may or may not be a contribution for any given paycheck, 
	// so we'll need to loop over each deduction to see if it's an FSA deduction
	for(item of [...deductions.querySelectorAll('tr')]) {
			if ("FSA" === item.children[0].innerHTML) {
					FSA = item.children[1].innerHTML;
			}
	}

	let contribution = [paycheckDate, FSA]
	contributions.push(contribution);
	
	// close the paycheck info row on the screen
	expandButton[1].click();
    
}

console.log(contributions)

// total the contributions
for (amount of [...contributions]) {
    if (amount[1]) {
        total = total + Number(amount[1].replace("$", ""))
    }
}