JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="text/javascript" src="jquery-git.js"></script>
<script type="text/javascript">
var clickCount = 0;
function toggleCheckboxes(num)
{
    // Определяем номера флажков, которые нужно переключить:

    chbxnum1 = (num + 1) % 5;
    chbxnum2 = (num + 2) % 5;
    
    if (chbxnum1 == 0) { chbxnum1 = 5 };
    if (chbxnum2 == 0) { chbxnum2 = 5 };
    
    // Выдаем свойства name соотв. флажков:
    //CheckboxToChange1_name = "checkbox" + chbxnum1;
    //CheckboxToChange2_name = "checkbox" + chbxnum2;
        
    // Меняем соотв. флажки:
    if ( $("#checkbox"+chbxnum1).attr("checked") )
        $("#checkbox"+chbxnum1).attr("checked", "");
    else 
        $("#checkbox"+chbxnum1).attr("checked", "checked");
        
    if ( $("#checkbox"+chbxnum2).attr("checked") )
        $("#checkbox"+chbxnum2).attr("checked", "");
    else 
        $("#checkbox"+chbxnum2).attr("checked", "checked");
        
    //Прибавляем счетчик ходов:
    clickCount++;
    
    //Определяем, не выставлены ли теперь все флажки?
    
    var checked_array = $("form[name=checkboxes] [type=checkbox]:checked");
    if(checked_array.length ==5)
        var victory = true;
    //else
        //alert("осталось отметить: "+ (5-checked_array.length) );

    
    //Если выставлены - выводим сообщение о победе с указанием числа ходов и перезагружаем страницу
    if (victory) { 
        if ( (clickCount % 100) > 10 && (clickCount % 100) < 20 ) {
                word = "щелчков"
        }
        else if ( (clickCount % 10) > 4 || (clickCount % 10) == 0 ) {
                word = "щелчков"
        }
        else if ( (clickCount % 10) != 1 ) { 
                    word = "щелчка"
        }
        else {
            word = "щелчок"
        }
        alert ("Победа!\n\nРешено за " + clickCount + " " + word); window.location.reload() 
    }
}
</script>
<title>Головоломка на флажках</title>
</head>
<body style="font-family: arial, helvetica, tahoma, sans-serif;">
<div...