Set Multi Select Field using Javascript

I'm trying to update a multi select field using javascript by passing a string of the values I want selected separated as such:

Streetlight; Node; Fiber; Test (spaces with semicolon)

I have also previously tried:

Streetlight;Node;Fiber;Test (no spaces with semicolon)

Streetlight,Node,Fiber,Test (no spaces with comma)

Streetlight, Node, Fiber, Test (space with comma)

All of them retain the value as a string instead of selecting the desired values. Anyone know if this is possible to do (different delimeter, different code?).

Here's the relevant code (basically there's two sets of check boxes...the ones that I put in the view header represent the values I'm trying to pass to the multi-select field and then there's a bunch of checkboxes in the table itself which represent the records I'm trying to update. It all technically works as the string of checkboxes chosen is successfully passed to the field for all selected records from the table, it's just not recognizing it as multiple selections and treating it all as one string still)...I've bolded the parts that pertain to this specific issue:

/**** For Locations To Add To A Subcontract ****/
$(document).on('knack-view-render.view_264', function (event, view) {

// Add an update button
$('<button id="update"">Add All Checked To Subcontract</button>').insertAfter('.view-header');
$('<br><form>Streetlight:<input class="typesofwork" type="checkbox" name="Streetlight"><br><br>Node:<input class="typesofwork" type="checkbox" name="Node"><br><br>Fiber:<input class="typesofwork" type="checkbox" name="Fiber"><br><br>Test:<input class="typesofwork" type="checkbox" name="Test"></form><br>').insertAfter('.view-header');

// Add checkboxes to our table
addCheckboxes(view);

// Click event for the update button
$('#update').click(function () {

// We need an array of record IDs
var record_ids = [];

// Populate the record IDs using all checked rows
$('#' + view.key + ' tbody input[type=checkbox]:checked').each(function() {
record_ids.push($(this).closest('tr').attr('id')); // record id
});

var boxes = document.getElementsByClassName('typesofwork');
var checked = [];
for(var i=0; boxes[i]; ++i){
if(boxes[i].checked){
checked.push(boxes[i].name);
}
}

var checkedStr = checked.join();
var res = checkedStr.replace(",", "; ");

Knack.showSpinner();

// Define the fields you want to update
var data = {
field_196: res
};

var objectID = 'object_2';

// Use the first ID in the array, then pass in the rest of the array
updateRecords(record_ids.shift(), objectID, record_ids, data);


})
})

var addCheckboxes = function(view) {

// add the checkbox to to the header to select/unselect all
$('#' + view.key + '.kn-table thead tr').prepend('<th><input type="checkbox"></th>');

$('#' + view.key + '.kn-table thead input').change(function() {
$('.' + view.key + '.kn-table tbody tr input').each(function() {
$(this).attr('checked', $('#' + view.key + '.kn-table thead input').attr('checked') != undefined);
});
});

// add a checkbox to each row in the table body
$('#' + view.key + '.kn-table tbody tr').each(function() {
$(this).prepend('<td><input type="checkbox"></td>');
});
}

var updateRecords = function(id, objectID, records, data) {
$.ajax({
url: 'https://api.knackhq.com/v1/objects/'+ objectID +'/records/' + id,
type: 'PUT',
/***** CHANGE TO YOUR OWN APPID AND API KEY HERE *****/
headers: {'X-Knack-Application-ID': 'XXXXX', 'X-Knack-REST-API-Key': 'XXXXX'},
data: data,
success: function(response) {
if ( records.length ) {
// Every time a call is made, the array is shifted by 1.
// If the array still has a length, re-run updateRecords()
console.log(records);

updateRecords(records.shift(), records,data);
} else {
// We know all records are processed when length = 0
alert('Update complete!');
Knack.hideSpinner();
location.reload();
}
}
})
}

Nevermind, i figured it out. Instead of passing it a string I just passed it the array variable 'checked' so I was just overthinking it apparently!

Works now!