In the code below when I'm doing an event change in a <select> tag I'm trying to replace the options inside the when this changes into a different value, the question is, How can I remove the previous store option tag in the <select> tag when am I storing a new <option> tag?

See this image for understanding the problem

const massArray = ["tonne", "Kilogram", "Gram", "Milligram", "Microgram","Imperial ton", "US ton", "Stone", "Pound", "Ounce"]
const areaArray = ["Square kilometer", "Square meter", "Square mile", "Square yard", "Square foot", "Square inch", "Hectare"]

var mainSelect = document.getElementById('mainSelect');

mainSelect.addEventListener("change", () => {
    if (mainSelect.value == "Area") {
        for (let i = 0; i < areaArray.length; i++) {
            const para = document.createElement("option");
            const node = document.createTextNode(areaArray[i]);
            para.appendChild(node);
            const element = document.getElementById("ssSucf");
            element.appendChild(para);

            const para2 = document.createElement("option");
            const node2 = document.createTextNode(areaArray[i]);
            para2.appendChild(node2);
            const secondSelectBox = document.getElementById("secondSelectBox");
            secondSelectBox.appendChild(para2);
        }
    }else if (mainSelect.value == "Mass") {
        
        for (let i = 0; i < massArray.length; i++) {
            const para = document.createElement("option");
            const node  = document.createTextNode(massArray[i]);
            para.appendChild(node);
            const element = document.getElementById("ssSucf");
            element.appendChild(para);

            const para2 = document.createElement("option");
            const node2  = document.createTextNode(massArray[i]);
            para2.appendChild(node2);
            const secondSelectBox = document.getElementById("secondSelectBox");
            secondSelectBox.appendChild(para2);

         }
    }
})