JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width: 400px; height: 300px;"></div>
<span onclick="foo();">Click me to create point</span>

JavaScript

var map, vectorLayer, wmsLayer, selectControl;

window.onload = function() {
    
    map = new OpenLayers.Map('map');
    
    wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0?",
        {layers: 'basic'},
        {'attribution': 'Provided by OSGeo'}
    );
    
    vectorLayer = new OpenLayers.Layer.Vector('Foo');
    
    map.addLayers([wmsLayer, vectorLayer]);
    map.zoomToMaxExtent();
    
    selectControl = new OpenLayers.Control.SelectFeature(vectorLayer);
    map.addControls([selectControl]);
    selectControl.activate();
}

var foo = function() { 
    selectControl.unselectAll();
    vectorLayer.destroyFeatures();
    vectorLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(10, 10))]);
    selectControl.select(vectorLayer.features[0]);

    // FIX:
    selectControl.handlers.feature.lastFeature = vectorLayer.features[0];

}