Previsualización:

.alerones-design {
display: inline-block;
width: 100px;
height: 50px;
margin-right: 10px;
background-color: gray;
border: 1px solid black;
}

.design1 {
background-color: red;
}

.design2 {
background-color: blue;
}

.design3 {
background-color: green;
}

.custom-alerones {
position: absolute;
width: 100px;
height: 50px;
border: 1px solid black;
}
const selectMoto = document.querySelector(‘#select-moto’);
const aleronesDesigns = document.querySelectorAll(‘.alerones-design’);
const colorAlerones = document.querySelector(‘#color-alerones’);

aleronesDesigns.forEach(design => {
design.addEventListener(‘click’, () => {
const motoImg = document.querySelector(‘#previsualizacion img’);
const customAlerones = document.createElement(‘div’);
customAlerones.classList.add(‘custom-alerones’);
customAlerones.style.backgroundColor = colorAlerones.value;
const existingCustomAlerones = document.querySelector(‘#previsualizacion .custom-alerones’);
if (existingCustomAlerones) {
existingCustomAlerones.remove();
}
document.querySelector(‘#previsualizacion’).appendChild(customAlerones);
motoImg.src = `${selectMoto.value}_${design.classList[1]}.jpg`;
});
});

colorAlerones.addEventListener(‘input’, () => {
const customAlerones = document.querySelector(‘#previsualizacion .custom-alerones’);
if (customAlerones) {
customAlerones.style.backgroundColor = colorAlerones.value;
}
});