Google map markers not removing upon checkbox action

I was having some problem trying to filter the list fetched from database upon checkbox action and plot/clear markers onto map. Here is my checkbox declaration in HTML:

<div class="">
     <label>
          <input type="checkbox" class="js-switch" name="tags" value="3" onchange="filterList()" unchecked/> MRT Incidents
     </label>
</div>

When checkbox onchange, I am filtering the list fetched from database:

        function filterList(){
        var tags = document.getElementsByName('tags');
        var i = 0;
        

    addMarker(filteredList);
    }

Then in my addMarker with filteredList parameter:

function addMarker(filteredList){ 
        for(var i = 0; i < filteredList.length; i++){
        myLatLng = {lat: parseFloat(filteredList[i].lat), lng: parseFloat(filteredList[i].lng) };

        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            clickable: true
        });
}

My plotting works weird as well. When I try to check multiple box, let's say I checked the first one, it plotted out. Then I proceed to check the second, it does not plot out but only plot out after I uncheck the first one.

When I try to uncheck the checkbox, the markers on the map are not removed. Instead, it just stay there forever and stacked more and more when I check/uncheck a few times.

Why is it so? Thanks in advance!