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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="print">
  <h1 id="group">
  </h1>

</div>

JavaScript

var response = {
row1: [{group: 'Group A'}],
  row2: [
    {team: 'Team A', player: 'Jema', result: 43},
    {team: 'Team B', player: 'Deno', result: 34},
    {team: 'Team B', player: 'Niob', result: 56},
    {team: 'Team B', player: 'Skion', result: 49},
  ],
};

var teams = {}
let count = -1;

response.row2.forEach(e=>{
    if(!(e.team in teams)){
    count++;
    teams[e.team] = "";
    }
    teams[e.team] += "<tr><td>"+e.player+"<td><input type='text' value='" + e.result + "'></td></tr>";
})

var table = "";
for(let team in teams){

table += '<table class="table bordered"><thead><th>Name</th><th>Result</th></thead></tbody>';
table += '<tr colspan="2" ><td>'+team+'</td></tr>';

table += teams[team];

table += '<tr colspan="2"><td><textarea placeholder="textarea..."></textarea></td></tr>';

table += '</tbody></table>';

if(count) table += "<div class='break'></div>"

count--;

}



$("#print").html(table);

var PrintThis = document.getElementById('print');
				var PrintStyle = '<style type="text/css">' + 
									'@media print{' +
									'.break { page-break-after: always }' +
									'}' +
									'</style>';
				PrintStyle += PrintThis.innerHTML;
				myWin = window.open("");
				myWin.document.write(PrintStyle);
				myWin.print();
				myWin.close();