jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/b-1.6.1/r-2.2.3/sl-1.3.1/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.20/b-1.6.1/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Job Step Execution</h1>
            </div>
            <div>
<table id="jobStepExecutionTab" class="display table table-striped table-bordered nowrap" style="width:100%">
    <thead>
    <tr>
        <th>stepExecutionId</th>
        <th>Version</th>
        <th>stepName</th>
        <th>jobExecutionId</th>
        <th>startTime</th>
        <th>endTime</th>
        <th>status</th>
        <th>exitCode</th>
        <th>exitMessage</th>
        
    </tr>
    </thead>
</table>
</div>
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 id="modalTitle"></h3>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div...

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

$(document).ready(function () {
   


  
    /*
    Specifying datasource for testing purpose:
     */
    let dataSet = [
        {
            "stepExecutionId": 13487,
            "version": 2,
            "stepName": "objectXmlFileSenderStep",
            "jobExecutionId": null,
            "startTime": "2019-12-04T14:55:51.960+0000",
            "endTime": "2019-12-04T14:55:53.134+0000",
            "status": "FAILED",
            "commitCount": 0,
            "readCount": 1,
            "filterCount": 0,
            "writeCount": 0,
            "readSkipCount": 0,
            "writeSkipCount": 0,
            "processSkipCount": 0,
            "rollbackCount": 2,
            "exitCode": "FAILED",
            "exitMessage": "org.springframework.retry.ExhaustedRetryException: Retry exhausted after last attempt in recovery path, but exception is not skippable.; ",
            "lastUpdated": "2019-12-04T14:55:53.134+0000"
        },
        {
            "stepExecutionId": 13486,
            "version": 2,
            "stepName": "objectXmlFileSenderStep",
            "jobExecutionId": null,
            "startTime": "2019-12-04T14:55:51.960+0000",
            "endTime": "2019-12-04T14:55:53.134+0000",
            "status": "COMPLETED",
            "commitCount": 0,
            "readCount": 1,
            "filterCount": 0,
            "writeCount": 0,
            "readSkipCount": 0,
            "writeSkipCount": 0,
            "processSkipCount": 0,
            "rollbackCount": 2,
            "exitCode": "COMPLETED",
            "exitMessage": "org.springframework.retry.ExhaustedRetryException: Retry exhausted after last attempt in recovery path, but exception is not skippable.; nested exception is "
        },
        {
            "stepExecutionId": 13485,
            "version": 2,
            "stepName": "objectXmlFileSenderStep",
            "jobExecutionId": null,
            "startTime": "2019-12-04T14:55:51.960+0000",
            "endTime":...