JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://devrooster.fwest98.nl/includes/highcharts.js"></script>
<script src="http://devrooster.fwest98.nl/includes/grey_highcharts.js"></script>
<div id="highcharts_popup"></div>
<span class="highcharts" data-v="Aardrijkskunde">Aardrijkskunde</span><br />
<span class="highcharts" data-v="Frans">Frans</span><br />
<span class="highcharts" data-v="Geschiedenis">Geschiedenis</span><br />
<span class="highcharts" data-v="Duits">Duits</span><br />
<span class="highcharts" data-v="Engels">Engels</span><br />
<span class="highcharts" data-v="Grieks">Grieks</span><br />
<span class="highcharts" data-v="Latijn">Latijn</span><br />
<span class="highcharts" data-v="Gym">Gym</span><br />
<span class="highcharts" data-v="Natuurkunde">Natuurkunde</span><br />
<span class="highcharts" data-v="Nederlands">Nederlands</span><br />
<span class="highcharts" data-v="Scheikunde">Scheikunde</span><br />
<span class="highcharts" data-v="Tekenen">Tekenen</span><br />
<span class="highcharts" data-v="Wiskunde">Wiskunde</span><br />

JavaScript

$('.highcharts').on("click", this, function() { // show vak
    var series2 = chart2.series;
    var vak = $(this).data('v');
    var rand = Math.floor((Math.random()*100)+1);
    var b = 9999999;
    $.each(series2, function(i) {
        if(this.index == b) {
            this.show();
            return true;
        }
        if(this.name != vak) {
            this.hide();
        } else if(this.name == vak) {
            this.show();
            b = i+1;
            return true;
        }
    });
    function getPos(obj) {
        var curleft = curtop = 0;
        if(obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
                return [curleft,curtop];
        }
    }
    var pos = getPos(this);
    $('#highcharts_popup').css('left', pos[0]+10).css('top',pos[1]+10);
    $('#highcharts_popup').removeClass().addClass(vak).show();
}); 


var chart2 = '';
/* Boel random data */
$(document).ready(function() {
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'highcharts_popup',
            zoomType: 'xy'
        },
        title: {
            text: 'Cijferverloop'
        },
        xAxis: {
            title: {
                text: '2011/2012'
            },
            type: 'datetime',
            min: Date.UTC(2011, 8, 1),
            //max: Date.UTC(2012, 2, 1)
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 1,
            max: 10,
            tickInterval: 1,
            
            rangeSelector: {
                enabled: false
            },
            spline: {
                stickyTracking: true
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            formatter: function() {
                var a = new Array();
                var s = '<b>'+Highcharts.dateFormat('%A %e %B, %Y', this.x)+'</b>';
  ...