Dynamically add data, remove markers outside of bounds, add markers inside of bounds - mapbox-gl-js

Question

I've been struggling with this feature for weeks, but am starting to think it's not possible. Hopefully someone here can prove me wrong! :)
Using Mapbox GL. On page load, map renders with markers within the given bounds. I'm trying to mimic functionality where the user drags the map, and based on the new bounds, new markers are drawn and old ones are removed. Data for the new markers are dynamic based on an API request. I managed to find a function after much Googling to test if a point is in bounds of a map and that works, but given how the function works to add/remove the marker, dynamic data doesn't seem to fit in.
I've created a fiddle here and hard-coded a new "feature" but it's not getting drawn. There is most likely a second part of this issue, but maybe i can figure it out on my own once this is deemed feasible
Any advice would be greatly appreciated. Thanks in advance!
geojson.features.forEach(function (marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function () {
window.alert(marker.properties.message);
});
// add marker to map
var point = new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates);
map.on("dragend", function() {
if ( inBounds(marker.geometry.coordinates, map.getBounds()) == false ) {
point.remove();
} else {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Lurman",
"iconSize": [20, 20]
},
"geometry": {
"type": "Point",
"coordinates": [
-59.29223632812499,
-17.28151823530889
]
}
})
point.addTo(map);
}
})
});
function inBounds(point, bounds) {
var lng = (point[0] - bounds._ne.lng) * (point[0] - bounds._sw.lng) < 0;
var lat = (point[1] - bounds._ne.lat) * (point[1] - bounds._sw.lat) < 0;
return lng && lat;
}

Answer 1

I was able to resolve this by using layers and updating it on dragend.