Error en JS al devolver por pantalla datos cargados por el usuario

Hola! Estoy intentando resolver un ejercicio que le pide al usuario cargar datos de discos: al darle click al botón Cargar discos con onclick se le pedirá:

 - el nombre del disco,
- autor o banda,
- código único del disco,
- nombre de pista y su duración medida en segundos. Si la duración es igual o mayor a 180 segundos, al imprimirse el número deberá pintarse en color rojo.

El usuario puede ingresar la cantidad de pistas que quiera y cuando ya no quiera seguir cargando, se le preguntará si quiere cargar otro disco. Después al darle al botón Mostrar discos el programa va a devolver todos los datos que se ingresaron.

El programa me está funcionando bien hasta la parte que devuelve los nombres de las pistas y su duración. Es decir, supongamos que cargo un disco de Queen con dos canciones y después cargo uno de Coldplay con 2 canciones. Al mostrar los datos se ven 4 canciones: en Queen tengo las propias más las de Coldplay y viceversa. Se están pisando los datos.

La pregunta sería: qué cosa debería modificar en las funciones cargarDatosDelDisco y en mostrarDiscosCargados para corregir ése error? Y cómo puedo hacer que la duración de 180 para arriba aparezca en rojo al imprimirse?

Me cuesta entender bien de dónde el programa debe sacar los datos correctamente porque tengo: el array pistas[] en la clase DatosDelDisco, en la función pedirPista está el array todasLasPistas[] que toma el nombre y la duración

Dejo mi código (es un poco largo, lo sé, pero no sé de qué otra forma puedo mostrarlo claro para ver el problema):

class DatosDelDisco {
    constructor(nombre, autor, codigo) {

        this.nombre = nombre,
            this.autor = autor,
            this.codigo = codigo;
    }

    // pistas guardará el nombre y la duración de cada canción

    pistas = [];

}


let mensajeDeAlerta = "";


// 1) SOLICITAR NOMBRE DEL DISCO
// 2) PEDIR AUTOR DEL DISCO 

const pedirDato = (mensaje) => {

    // La variable valor se reutilizará en cada dato string solicitado en el programa

    let valor = prompt(mensaje);

    // Si no se ingresa nada al solicitar el dato se disparará un alert para solicitarlo de nuevo

    if (valor == "" || !isNaN(valor)) {

        mensajeDeAlerta = alert("No puede dejar este campo en blanco ni el dato ser un número. Por favor intente de nuevo.");

        // Se le pedirá al usuario que ingrese de nuevo el dato

        return pedirDato(mensaje);

    } else {

        return valor;
    }

}

// 3) PEDIR CÓDIGO DEL DISCO

// Array donde se guardarán los códigos de los discos para después hacer la verificación de código repetido

let listaDeCodigos = [];

const cargarCodigoDelDisco = () => {

    codigo = parseInt(prompt("Ingresa el código del disco"));

    // Validación para que el código ingresado esté en rango ni sea otro dato que no sea un número

    if (codigo <= 0 || codigo > 999 || isNaN(codigo)) {

        mensajeDeAlerta = alert("El código no puede ser menor a 1 ni mayor a 999. Por favor ingrese un código válido");

        // Se volverá a pedir al usuario que ingrese de nuevo el código

        return cargarCodigoDelDisco();

        // sino, el dato se verificará para no estar repetido 

    } else {

        // VERIFICAR SI EL CÓDIGO YA FUE CARGADO ANTES

        const codigoUnico = listaDeCodigos.find((codigoUnico) => codigoUnico == codigo);

        while (codigoUnico) {

            mensajeDeAlerta = alert("Código ya existente. Por favor ingrese un dato válido");

            return cargarCodigoDelDisco();

        }

        // y después se va a cargar al array 

        listaDeCodigos.push(codigo);
        
        return codigo;
    }

}

// 4) PEDIR EL NOMBRE DE LA PISTA

// Array donde se guardarán todas las pistas de cada disco

let todasLasPistas = [];

const pedirPista = () => {

    // Declaro las variables donde se guardarán los datos solicitados

    let nombrePista = "";
    let duracionPista;

    do {

        nombrePista = pedirDato("Ingrese el nombre de la pista");

        // Validación del dato ingresado 

        if (nombrePista == "") {

            mensajeDeAlerta = alert("Este campo no puede quedar vacío. Por favor ingrese un dato válido");

            return pedirPista();

        } else {

            // 5) PEDIR DURACIÓN DE LA PISTA

            duracionPista = cargarDuracionDelDisco();

            // En el array vacío todasLasPistas se guardarán el nombre y la duración de cada pista

            todasLasPistas.push({
                nombre: nombrePista,
                duracion: duracionPista

            })

        }

    }
    // 6) PREGUNTAR AL USUARIO SI DESEA CARGAR OTRA PISTA

    while (confirm("Desea cargar otra pista?"))

    return todasLasPistas;
}


const cargarDuracionDelDisco = () => {
    let segundos = parseInt(prompt("Ingrese la duración de la pista medida en segundos"));

    // Validación de la duración de la pista

    if (segundos <= 0 || segundos > 7200 || isNaN(segundos)) {

        mensajeDeAlerta = alert("La cantidad de segundos no puede ser menor o igual a 0 ni mayor a 7200. Por favor ingrese un código válido");

        // Se volverá a pedir al usuario que ingrese de nuevo el código
        return cargarDuracionDelDisco();
    }

    return segundos;
}


// Array donde se guardarán los discos a medida que son cargados

let discos = [];

// Variables a llenar al cargar los datos

let nombre = "";
let autor = "";
let codigo;
let pistas;

// Función para cargar los datos del disco al darle click al botón Cargar

function cargarDatosDelDisco() {

    do {

        nombre = pedirDato("Ingrese el nombre del disco");
        autor = pedirDato("Ingrese el autor del disco");
        codigo = cargarCodigoDelDisco();
        pistas = pedirPista();


        discos.push({

            nombre: nombre,
            autor: autor,
            codigo: codigo,
            pista: pistas // VER: CREO QUE EL ERROR PODRÍA ESTAR ACÁ

        });

    }


    // Preguntar al usuario si desea cargar un nuevo disco

    while (confirm("Desea cargar otro disco?"))

}


function mostrarDiscosCargados() {

    
    let html = "";

    discos.forEach( disco => {

        html += `<ul>
    <li>Nombre del disco: <strong> ${disco.nombre} </strong> </li>
    <li>Autor/ banda: <strong> ${disco.autor} </strong> </li>
    <li>Código único del disco: <strong> ${disco.codigo} </strong> </li>
    <div>
    <ul>Lista de pistas y duración: ${disco.pista.map(pistas => { 

// QUÉ ESTÁ MAL ACÁ QUE HACE QUE SE PISEN LOS DATOS EN LAS PISTAS CARGADAS EN CADA DISCO? 

// CARGO 2 DISCOS CON 2 CANCIONES C/U Y AL IMPRIMIR APARECEN 4 CANCIONES POR CADA DISCO (2 DEL DISCO CORRECTO Y 2 QUE NO CORRESPONDEN)

        return `<li> <strong> ${pistas.nombre}</strong>: <span class= "highlight__red"> ${pistas.duracion} </span> segundos</li> ` 
        
    })} 
    
    </ul>
    <div>
   </ul>`;

    })

    document.getElementById("coleccion").innerHTML = html;
}


Saludos y muchas gracias!

Tema de Origen