JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css">
<script src="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js"></script>
<div id="map">&nbsp;</div>
<a id="remove">Remove</a>

<a id="add">Add</a>

CSS

body {
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
}
#remove {
    position: absolute;
    top: 40px;
    right: 10px;
    background: #fff;
}
#add {
    position: absolute;
    top: 60px;
    right: 10px;
    background: #fff;
}

JavaScript

var map = L.mapbox.map("map", "examples.map-4l7djmvo");

var data = {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [8, 46.4]
        },
        properties: {
            name: "data"
        }
    }]
};

var data2 = {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [30, 46.4]
        },
        properties: {
            name: "data2"
        }
    }]
};

var myStyle = {
    color: '#fff',
    opacity: 0.5,
    fillColor: '#fff',
    fillOpacity: 0.4,
    weight: 4
};
var group = L.geoJson(null, {
    style: myStyle,
    onEachFeature: function (feature, layer) {
         layer.bindPopup(feature.properties.name);
     }
}).addTo(map);

group.addData(data);
group.addData(data2);

$("#remove").click(function () {
    group.clearLayers();
});
$("#add").click(function () {
    group.addData(data);
});