Passing string from array iteration into ajax data. Data is empty on server side

Question

@app.route('/sorter', methods=['POST'])
def sorter():
    data = request.data
    result = USCandidateCSV.sort_CSV(data)
    return result  

The data object from above method is populated below. Each cell in the row is being populated correctly with the text from fieldArray, and shows up in my table. So that part works, but using the same string from fieldArray won't work when adding the event listener and attempting to use fieldArray iteration in AJAX.

The below code is contained in a function that populates the table (I removed the table populating to keep this short) and the data is sent to the server.

 var fieldArray = ["Candidate Name", "State", "District", "Party", "Total Received"];

    for (var i = 0; i < fieldArray.length; i++){
        td1.addEventListener("click", function(){
             $.ajax({
                data: JSON.stringify(fieldArray[i]),
                success: receiveSortedData,
                dataType: "json",
                contentType: "application/json"
             });
            });
        tr.appendChild(td1);
    }

Server Side I do a console log and this comes through: b'' (I am expecting a byte, just not an empty one)

Now if I assign each iteration to an object, like "var text", this will work, but when each cell is clicked they only send the data from the very last iteration ("Total Received"), so it is obviously overwriting the value from the last iteration.

How can I pass an object that isn't overwritten?