JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">   

            <div class="row-fluid">

                <div class="span10">

                    <div id="map" class="map"></div>

                    <!-- Labelfields Boxen -->
                    <div class="edit-form">

                        <h2>Koordinaten und Radius
                            <input id="refresh" type="button" value="Marker hinzufügen" onclick="checkRefresh()"/>
                        </h2>
                        <div class="edit-form-elem">
                            <label>X: </label>
                            <input type="text" id="coordinate-x" class="filterme" placeholder="X Koordinaten eingeben" name="x" onfocus="this.value=''"/>
                            <label>Y: </label>
                            <input type="text" id="coordinate-y" class="filterme" placeholder="Y Koordinaten eingeben" name="y" onfocus="this.value=''"/> 
                        </div>

                        <div class="edit-form-elem">
                            <label>Radius: </label>
                            <input type="text" id="rad" class="filterme" placeholder="Radius eingeben" name="rad" onfocus="this.value=''"/> 
                        </div>
                        
                        <div style="clear:left;"></div>
                    </div>

                    <div class="edit-form">

                        <h2>Zeichnung</h2>
                        <form class="form-inline">
                            <label>Geometry type &nbsp;</label>
                            <select id="type">
                                <option value="length" >Length</option>
                                <option value="area" >Area</option>
                            </select>
                        </form>
                        <div class="span12">
                            <input id="measure" type="button" value="Berechnung an" onclick="checkMeassure()"/>
                            <input id="measureOff"...

JavaScript

var pixelProjection = new ol.proj.Projection({
    code: 'metrics', 
    units: 'm', 
    extent: [-11.25, -4.5, 508, 50] 
});
/**
* Elemente für den Popup
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

closer.onclick = function() {
    container.style.display = 'none';
    closer.blur();
    return false;
};
var overlay = new ol.Overlay({
    element: container,
    positioning: 'bottom-center',
    stopEvent: true
});
///////////////////////////////////////////////////map//////////////////////////////////////////
var baseLayer = 
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: 'bild1.png', 
            imageSize: [729, 146], 
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent() 
        })
    });

var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.DragRotateAndZoom()
    ]),
    layers: [baseLayer],
    renderer: exampleNS.getRendererFromQueryString(),
    overlays: [overlay],
    target: 'map',
    view: new ol.View2D({
        projection: pixelProjection,
        center: ol.extent.getCenter(pixelProjection.getExtent()),
        zoom: 2
    })
});
//////////////////////////////////Radiobutton ///////////////////////////////////////////////////////////
$('#layertree li > span').click(function() {
    $(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();

function checkedRadioBtn(url, size, extProj){
    map.removeLayer(baseLayer);
    
    var allLayers = map.getLayers().getArray()[0];
    map.removeLayer(allLayers);

    for(var i = 0;i<iconsDraw.length;i++){
        map.removeLayer(iconsDraw[i]);        
    }
    if(meassureVector)
        map.removeLayer(meassureVector);
    checkMeassureOff();
    checkMeassureInitialized = false;

    for(var i = 0; i<iconsCircle.length; i++){
       ...