> Este es todo mi codigo JS.

    <!DOCTYPE html>
        <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>EP4 - Ejercicio 2</title>
            <style>
                div{
                    padding: 10px;
                }
                #alumno1 {
                 display: inline-block;
                }
                #alumno1 input {
                display: flex ;
                flex-direction: column;
                margin: 39px;
                height: 25px;
                width: 55px;
                }
        
            .alumno {
                display: inline-block;
            }
        
            #titulo1 {
                display: inline-block;
                margin-left: 20%;
            }
                
            </style>
            <script type="text/javascript">
        
                    function procesarNotas() {
        
        
                    var notas = [
                                document.getElementById('alumno1-nota1').value,
                                document.getElementById('alumno1-nota2').value,
                                document.getElementById('alumno1-nota3').value,
                                document.getElementById('alumno1-nota4').value
                                ]
        
                    var notas2 = [
        
                                document.getElementById('alumno2-nota1').value,
                                document.getElementById('alumno2-nota2').value,
                                document.getElementById('alumno2-nota3').value,
                                document.getElementById('alumno2-nota4').value
                                 ]
        
                    var notas3 = [
        
                                    document.getElementById('alumno3-nota1').value,
                                    document.getElementById('alumno3-nota2').value,
                                    document.getElementById('alumno3-nota3').value,
                                    document.getElementById('alumno3-nota4').value
                                 ]
        
                    var notas4 = [
                                    document.getElementById('alumno4-nota1').value,
                                    document.getElementById('alumno4-nota2').value,
                                    document.getElementById('alumno4-nota3').value,
                                    document.getElementById('alumno4-nota4').value
        
                                ]
        
                    var notasFinal = [notas, notas2, notas3, notas4]
        
                                var promedio = (+notas[0] + +notas[1] + +notas[2] + +notas[3]) / 4
                                var promedio2 = (+notas2[0] + +notas2[1] + +notas2[2] + +notas2[3]) / 4
                                var promedio3 = (+notas3[0] + +notas3[1] + +notas3[2] + +notas3[3]) / 4
                                var promedio4 = (+notas4[0] + +notas4[1] + +notas4[2] + +notas4[3]) / 4
        
                                var parrafo = document.getElementById('mensaje')
                                var parrafoP1 = document.getElementById('mensaje2')
                                var parrafoP2 = document.getElementById('mensaje3')
                                var parrafoP3 = document.getElementById('mensaje4')
        
                                var parrafo2 = document.getElementById('mensajeC')
                                var parrafo2C = document.getElementById('mensajeC2')
                                var parrafo3C = document.getElementById('mensajeC3')
                                var parrafo4C = document.getElementById('mensajeC4')
                                
                                parrafo.innerHTML = promedio
                                parrafoP1.innerHTML = promedio2
                                parrafoP2.innerHTML = promedio3
                                parrafoP3.innerHTML = promedio4
        
                                if (promedio >= 11) {
        
                                    parrafo2.style.color = 'Green'
                                    parrafo2.innerHTML = 'Aprobado'
                                    
                                } else {
                                    parrafo2.style.color = 'Red'
                                    parrafo2.innerHTML = 'Desaprobado'
                                }
                                
                                if (promedio2 >= 11) {
                                    parrafo2C.style.color = 'Green'
                                    parrafo2C.innerHTML = 'Aprobado'
                                } else {
                                    parrafo2C.style.color = 'Red'
                                    parrafo2C.innerHTML = 'Desaprobado'
                                }
        
                                if (promedio3 >= 11) {
                                    parrafo3C.style.color = 'Green'
                                    parrafo3C.innerHTML = 'Aprobado'
                                } else {
                                    parrafo3C.style.color = 'Red'
                                    parrafo3C.innerHTML = 'Desaprobado'
                                }
                                if (promedio4 >= 11) {
                                    parrafo4C.style.color = 'Green'
                                    parrafo4C.innerHTML = 'Aprobado'
                                } else {
                                    parrafo4C.style.color = 'Red'
                                    parrafo4C.innerHTML = 'Desaprobado'
                                }
        
                                var nombresAprobados = [];
                                var nombresDesaprobados = [];
                                var lista1 = document.getElementById('listaA')
                                var lista2 = document.getElementById('listaD')
        
                                for (var i = 0; i < notasFinal.length; i++) {
                                    if (notasFinal[i] >= 11) {
                                        nombresAprobados = notasFinal[i]
                                        lista1.style.color = 'green'
                                        lista1.innerHTML = nombresAprobados
                                    } else {
                                        nombresDesaprobados = notasFinal[i]
                                        lista2.style.color = 'red'
                                        lista2.innerHTML = nombresDesaprobados
                                    }
        
                        }
                    } 
        
        
            </script>
        </head>
        <body>
            <h1 align="center" style="font-size: 30px;">Ejercicio 2</h1>
            <div class="alumno">
                <div><p><strong>Nota 1</strong></p></div>
                <div><p><strong>Nota 2</strong></p></div>
                <div><p><strong>Nota 3</strong></p></div>
                <div><p><strong>Nota 4</strong></p></div>
                
              </div>
            <div id="alumno1">
                <div id="titulo1"><p><strong>Alumno 1</strong></p></div>
                <input type="text" id="alumno1-nota1">
                <input type="text" id="alumno1-nota2">
                <input type="text" id="alumno1-nota3">
                <input type="text" id="alumno1-nota4">
            </div>
            <div id="alumno1">
                <div id="titulo1"><p><strong>Alumno 2</strong></p></div>
                <input type="text" id="alumno2-nota1">
                <input type="text" id="alumno2-nota2">
                <input type="text" id="alumno2-nota3">
                <input type="text" id="alumno2-nota4">
            </div>
            <div id="alumno1">
                <div id="titulo1"><p><strong>Alumno 3</strong></p></div>
                <input type="text" id="alumno3-nota1">
                <input type="text" id="alumno3-nota2">
                <input type="text" id="alumno3-nota3">
                <input type="text" id="alumno3-nota4">
            </div>
            <div id="alumno1">
                <div id="titulo1"><p><strong>Alumno 4</strong></p></div>
                <input type="text" id="alumno4-nota1">
                <input type="text" id="alumno4-nota2">
                <input type="text" id="alumno4-nota3">
                <input type="text" id="alumno4-nota4">
            </div>
            
            <p><strong>Promedio</strong></p>
            <p id="mensaje"></p>
            <p id="mensaje2"></p>
            <p id="mensaje3"></p>
            <p id="mensaje4"></p>
            <br><br>
            <p><strong>Condicion</strong></p>
            <p id="mensajeC"></p>
            <p id="mensajeC2"></p>
            <p id="mensajeC3"></p>
            <p id="mensajeC4"></p>
        
            <p id="listaA"></p>
            <p id="listaD"></p>
        
            <h2 align="center"><input type="button" value="Procesar Notas" onclick="procesarNotas()"></h2>
            
        </body>
        </html>
Aqui esta todo lo que he avanzado, el porblema es la lista de alumnos aprobados y desaprobados. Desde el Alumno 1 hasta el alumno 4 deberia darme que alumnos aprobaron y quienes no. 
Una consulta mas, como podria hacer para que el programa me muestre el promedio mientras voy typeando las notas? No sabia como hacerlo asique lo pase a la funcion del boton. Agradeceria bastante la ayuda con estos 2 problemas. No se que mas poner sinceramente porque no me deja poner la pregunta.