JSFiddle - React, Tailwind, and code Playground

by carcleo1999

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="head">
	<li style="width: 250px">Aluno</li>
	<li class="li100">AD1</li>
	<li class="li100">AP1</li>
	<li class="li100">N1</li>
	<li class="li100">AD2</li>
	<li class="li100">AP2</li>
	<li class="li100">N2</li>
	<li class="li100">MÉDIA</li>
	<li class="li100">AP3</li>
	<li class="li100">AP4</li>
</ul>
<div class="list">
	<ul class="notes list">
		<li style="width: 250px"><label>Nome: </label><input type="hidden" name="students[281]">Fulano</li>
		<li class="li100"><label>AD1: </label><input type="number" min="0" max="10" name="ad1[281]" value="0"></li>
		<li class="li100"><label>AP1: </label><input type="number" min="0" max="10" name="ap1[281]" value="0"></li>
		<li class="li100"><label>N1: </label><label name="n1[281]" class="n1">0</label></li>
		<li class="li100"><label>AD2: </label><input type="number" min="0" max="10" name="ad2[281]" value="0"></li>
		<li class="li100"><label>AP2: </label><input type="number" min="0" max="10" name="ap2[281]" value="0"></li>
		<li class="li100"><label>N2: </label><label name="n2[281]" class="n2">0</label></li>
		<li class="li100"><label>Média: </label><label name="media[281]" class="media">0</label></li>
		<li class="li100"><label>AP3: </label><input disabled="" type="number" min="0" max="10" name="ap3[281]" value="0"></li>
		<li class="li100"><label>AP4: </label><input disabled="" type="number" min="0" max="10" name="ap4[281]" value="0"></li>
	</ul>
	<ul class="notes list">
		<li style="width: 250px"><label>Nome: </label><input type="hidden" name="students[352]">Bertano</li>
		<li class="li100"><label>AD1: </label><input type="number" min="0" max="10" name="ad1[352]" value="0"></li>
		<li class="li100"><label>AP1: </label><input type="number" min="0" max="10" name="ap1[352]" value="0"></li>
		<li class="li100"><label>N1: </label><label name="n1[352]" class="n1">0</label></li>
		<li class="li100"><label>AD2: </label><input...

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
* {    
    font-family: Montserrat;
    margin: 0 ;
    padding: 0 ;
    border: none  ;
    outline: none  ;
    text-decoration: none;
    transition: all 1s ease;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/
    box-sizing: border-box; 
}
html, body {    
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 5px;
    color:#fff;
    background: #333;
}
div, nav, section, a, ul, li, form, input, button, select, label, h1, h2, h3, h4, h5 {    
    display: flex;
    padding: 10px;
}
h1,h2,h3,h4,h5 {        
    flex-direction: column;
	/*Alinha na horizontal*/
    align-items: center;
	/*Alinha na vetical*/
    justify-content: center;
	/*Alinha o próprio conteudo de texto centralizado no caso de uma segunda linha*/
	text-align: center;
}
h1 {
    font-size: 2.5rem;
}
ul {
    flex-wrap: wrap;   
    list-style: none;   
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
a {
    align-items: center;
    color:#999999;
    text-decoration: none;
}
input[type="radio"],
input[type="checkbox"] {
    align-items: center;
    justify-items: center;
    margin-right: 10px;
    width: 20px;
    height: 20px;
}
button {
    align-items: center;
    justify-items: center;
    margin-right: 10px;
    width: auto;
    height: 40px;
}
input[type="text"],
input[type="number"],
input[type="date"] {
    border: #ccc .5px solid;
    width: auto;
    height: 40px;
}
select {
    font-size: inherit;
}
.error {
    color: red;
}
.li120 {
    width: 120px;
}
.li100 {
    width: 100px;
}
.center {
    text-align: center;
}
section#body {
  width: 100%;
  flex-direction: column;
  align-items: center;
}
section#login,
section#error {
...

JavaScript

$(document).on('input', "ul.notes input[type=number]", function() { 

	if ($(this).val() > 10)
		$(this).val(10);

    // Identifica a lista atual onde ocorreu o evento
    const currentList = $(this).closest("ul.notes");
	
	// Obtém o ID do estudante
	const student_id = $(this).attr("name").match(/\[(\d+)\]/)[1];

    ad1 = $("input[name='ad1[" + student_id + "]']")
    ap1 = $("input[name='ap1[" + student_id + "]']")
    ad2 = $("input[name='ad2[" + student_id + "]']")
    ap2 = $("input[name='ap2[" + student_id + "]']")
	media = $("label[name='media[" + student_id + "]']")
    ap3 = $("input[name='ap3[" + student_id + "]']")
	ap3Val = Number(ap3.val()).toFixed(2)
    ap4 = $("input[name='ap4[" + student_id + "]']")
	ap4Val = Number(ap4.val()).toFixed(2)

	sum1 = ( ( Number(ad1.val()) + Number(ap1.val() ) ) / 2 ).toFixed(2);
	sum2 = ( ( Number(ad2.val()) + Number(ap2.val() ) ) / 2 ).toFixed(2);
	sum =  ( ( Number(sum1) + Number(sum2) ) / 2 ).toFixed(2);

    if ( $(this).is(ad1) || $(this).is(ap1) ) 
         $(this).parent().parent().find("label.n1").html(sum1);

    if ( $(this).is(ad2) || $(this).is(ap2) ) 
         $(this).parent().parent().find("label.n2").html(sum2);

	media.html(sum);	
	mediaVal = Number(media.html()).toFixed(2);

    if ( $(this).is(ad1) || $(this).is(ap1)  || $(this).is(ap2)  || $(this).is(ad2) ) {
        if (mediaVal >=7 ) {	
            ap3.prop({
                disabled: true,
                title: 'Aluno Aprovado',
                style: 'border-color: green'
            })	
            ap4.prop({
                disabled: true,
                title: 'Aluno Aprovado',
                style: 'border-color: green'
            })
            return
        } 
        if (mediaVal < 4 ) {
            ap3.prop({
                disabled: true,
                title: 'Aluno Reprovado',
                style: 'border-color: red; color: red'
            })
            ap4.prop({
                disabled: true,
                title:...