I'm developing a chrome extension that involves adding a column to a table, however aside from the header the changes only load for a second before they get overridden. My changes also activate after a button within the website is pressed to load the table, but the changes always only ever take place the 2nd time the button is pressed, but never the first.

manifest.json

    "name": "Better Registration",
    "description": "Registration Page",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": ["*://*.registrationssb.ucr.edu/*"],
            "js": ["content.js"],
            "run_at": "document_end"
        }
    ]
}

content.js

var run = document.getElementById("search-go");
if(run){
    run.addEventListener("click", load);
    
}


function load(){
    console.log("LOAD PAGE");
    var table = document.getElementById("table1");
    if(table != null){
        var row = table.rows[0];
        var cell = row.insertCell(9);
        cell.innerHTML = "PLACEMENT HEADER";
        for(let i = 1; i < table.rows.length; i++){
            var cell = table.rows[i].insertCell(9);
            cell.innerHTML = "PLACEMENT TEXT";
            
        }
    }
}