JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="gaming-field">
  </div>
  <p>Current turn: <b class='current-turn-flag'>X</b></p>
  <p class='someone-won'></p>
</body>
</html>

CSS

p {
  font-size: 24px;
  display:inline;
}

b .current-turn-flag {
  color: red;
}

table {
  display:block;
  border-collapse: collapse;
  margin-bottom: 5px;
}

td {
  margin:0;
  padding:0;
  
  width: 25px;
  height: 25px;
  
  border: 1px solid black;
  background-color: #ddd;
  
  font-size: 18px;
  color: #111;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  
  cursor:pointer;
}

.gaming-cell[data-checked="1"] {
  background-color:#FF7373;
}

.gaming-cell[data-checked="2"] {
  background-color: #6A93D4;
}

JavaScript

var turn_of_X = true;

function wincondition(cell1,cell2,cell3,cell4,cell5) {
	
	if ((cell1.dataset.checked == cell2.dataset.checked) && (cell1.dataset.checked == cell3.dataset.checked) && (cell1.dataset.checked == cell4.dataset.checked) &&  (cell1.dataset.checked == cell5.dataset.checked) && (cell1.dataset.checked>0)) {
  	let alertstr='Congratz, '+cell1.textContent+'-player, you won!';
     alert(alertstr);
     location.reload();
     }
}

function checkforwin(check_row,check_col) {
	for (let i=0;i<5;i++) {
  	let c1;
    let c2;
    let c3;
    let c4;
    let c5;
  	let table=document.querySelector('.gaming-field-table');
  	//horisontal check
    if((check_col-4+i>=0) && (+check_col+i<20)) {
  	c1=table.rows[check_row].cells[+check_col-4+i];
    c2=table.rows[check_row].cells[+check_col-3+i];
    c3=table.rows[check_row].cells[+check_col-2+i];
    c4=table.rows[check_row].cells[+check_col-1+i];
    c5=table.rows[check_row].cells[+check_col+i];
  	 wincondition(c1,c2,c3,c4,c5);
     }
    
    //vertical check
    if((check_row-4+i>=0) && (+check_row+i<20)) {
    c1=table.rows[check_row-4+i].cells[check_col];
    c2=table.rows[check_row-3+i].cells[check_col];
    c3=table.rows[check_row-2+i].cells[check_col];
    c4=table.rows[check_row-1+i].cells[check_col];
    c5=table.rows[+check_row+i].cells[check_col];
  	wincondition(c1,c2,c3,c4,c5);
    }
    
    //diagonal right down check
    if((check_row-4+i>=0) && (+check_row+i<20) && (check_col-4+i>=0) && (+check_col+i<20)) {
    c1=table.rows[check_row-4+i].cells[check_col-4+i];
    c2=table.rows[check_row-3+i].cells[check_col-3+i];
    c3=table.rows[check_row-2+i].cells[check_col-2+i];
    c4=table.rows[check_row-1+i].cells[check_col-1+i];
    c5=table.rows[+check_row+i].cells[+check_col+i];
  	wincondition(c1,c2,c3,c4,c5);
    }
    
    //diagonal right up check
    if((+check_row+4-i<20) && (check_row-i>=0) && (check_col-4+i>=0) && (+check_col+i<20)) {
   ...