Esta es mi primera pregunta, por favor, no me hagas caso.

El problema que tengo es que tengo un bucle para cada php para mapear (poblar) los divs en función de cuántos perfiles de clientes hay en la base de datos.

cada div tiene el mismo nombre de clase, así que... Uso querySelectorAll('.customerBox') para crear una lista de nodos con una cantidad x de divs según las filas de la base de datos.

Con esto, puedo cambiar los estilos según el índice de cada elemento.

A continuación se muestra un ejemplo rápido del script que estoy ejecutando para hacer esto:

 for (let i = 0; i < customerBox1.length; i++) { (function(e){ openCustBoxBtn1[e].onclick = function(){ if(customerBox1[e].style.minWidth == '100%'){ custCreationBox.style.display = 'flex'; customerBox1[e].style.minWidth = '25%'; customerBox1[e].style.minHeight = '50%'; } if(customerBox1[e].style.minWidth < '100%'){ custCreationBox.style.display = 'none'; customerBox1[e].style.minWidth = '100%'; customerBox1[e].style.minHeight = '100%'; } } })(i); }

Esto funciona perfectamente bien, el único problema es que la función solo se ejecuta con dos clics en cualquier elemento, así que digamos que hay tres elementos (.customerBox1)... Puedo hacer clic en el botón dentro del cuadro para que ocupe el 'pantalla completa', si vuelvo a hacer clic en ese botón y el elemento (.customerBox1) en el índice de lo que haya hecho clic tiene un ancho mínimo del 100%, se reducirá a su tamaño original, PERO después de esto, ese elemento individual no se puede volver a abrir , pero cualquier otro elemento en otro índice puede.

Seré honesto, tengo una vaga comprensión de cómo funciona esta función. La encontré aquí en el desbordamiento de la pila cuando buscaba cómo ejecutar onClick para querySelectorAll() en el índice del elemento en el que hizo clic.

Cualquier cosa ayuda gracias, si necesita más información por favor hágamelo saber. Traté de describir mi problema lo más profundamente posible.