JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a href="#" data-toggle="modal" data-target="#clusterprofileanomalies" id="Open Modal">Open Modal</a>

<div class="modal fade" id="clusterprofileanomalies" tabindex="-1" role="dialog"
                    aria-labelledby="clusterprofileanomalies" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="clusterprofiletitlepulse"></h4>
                            </div>
                            <div class="modal-body">
							<div class="tabbable"> <!-- Only required for left/right tabs -->
							<ul class="nav nav-tabs">
							<li class="active"><a href="#tab1" data-toggle="tab">Current</a></li>
							<li><a href="#tab2" data-toggle="tab">History</a></li>
							</ul>
							<div class="tab-content">
							<div class="tab-pane active" id="tab1">
							    
							<div class="panel panel-default">
								
								  	<h3 class="panel-title" id="clusterprofilepulse"></h3>
								 
								     <div class="panel-body">
									   <div class="table-responsive">
										<table class="table table-striped table-bordered table-hover" id="cluster_profile_pulse">
										<thead>

										<tr>

										
										<th style="text-align:center">Profile Attached</th>
										<th style="text-align:center">Last Scanned</th>
										<th style="text-align:center">Cluster...

JavaScript

// On click on link on main table
$("#cluster_profiles_dataTables").on("click", "a", function() {
// Grab the ID of the link
id3 = $(this).attr('id');

 // Change titles of graph in modal
document.querySelector('#clusterprofiletitlepulse').innerHTML = '<h4 class="modal-title" id="pulse">Profile Status' + ' (' + id3 + ')</h4>';
document.querySelector('#clusterprofilepulsetable').innerHTML = '<i class="fa fa-long-arrow-right"></i> '+ id3 + ' Additional Anomalies';
document.querySelector('#clusterprofilepulsehist').innerHTML = '<i class="fa fa-long-arrow-right"></i> '+ id3 + ' Historical Anomalies';
document.querySelector('#clusterprofilepulsegraphhist').innerHTML = '<i class="fa fa-long-arrow-right"></i> '+ id3 + ' Historical Anomalies';

 // Populate graphs when tab event is fired
 $('#clusterprofileanomalies').on('shown.bs.tab', function () {
	$( "#morris-chart-cluster-pulse-graph-hist" ).empty();

        // Create a Bar Chart with Morris
        var chart = Morris.Line({
        element: 'morris-chart-cluster-pulse-graph-hist',
        d: [
        { d: '0', value: 0 }
        ],
         xkey: 'd',
        ykeys: ['value'],
        labels: ['Anomalies Found'],
        gridIntegers: true,
        ymax: 'auto',
        ymin: '0',
        smooth: false,		 
        xLabelFormat: function(d) { return (d.getMonth()+1)+'/'+d.getDate(); },
        xLabels: "week"
        });
        // Fire off an AJAX request to load the data
        $.ajax({
        type: "GET",
        dataType: 'json',
        url: "../scripts/cluster_profile_pulse_graph_hist.php?val="+id3, // This is the URL to the API	
        })
        .done(function (data) {
        // When the response to the AJAX request comes back render the chart with new data
        chart.setData(data);
        })
        .fail(function () {
        // If there is no communication between the server, show an error
        alert("error occured");
        });
        });

        //   
       ...