Как разъединить массивы, которые уже были объединены, или сделать это по другому

Есть массивы, которые объединяются при выборе в селекте. Скрипт работает, но при выборе другого оптионс, массив просто добавляет элементы а не обнуляется и запускается по новой. Пробывал несколько вариантов, оставил их в коде arrr2 = []; Как можно это реализовать. Ну и если кто то добрый, оптимизировать этот код, так как он получается слишком огромным

function maxa1() {

let div13, img3, a3, div23;


let arretikavikl = [
    ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  arretikasilros = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
 
 arretikatvros = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
 arretikatelros= [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arretikauprotp = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arretikafuncip = [
    ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  arrvalenaclassvikl = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  arrvalenaclasssilros = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
 
 arrvalenaclasstvros = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
 arrvalenaclasstelros= [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrvalenaclassuprotp = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrvalenaclassfuncip = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  
    arrvalenalifevikl = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  arrvalenalifesilros = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
 
 arrvalenalifetvros = [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
 arrvalenalifetelros= [
   ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrvalenalifeuprotp = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrvalenalifefuncip = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
    arrvalenaallurevikl = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ], 
  arrvalenaalluresilros = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
 arrvalenaalluretvros = [
  ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ], 
 arrvalenaalluretelros= [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ], 
arrvalenaallureuprotp = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ], 
arrvalenaallurefuncip = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
    arrcelianevikl = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  arrcelianesilros = [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
 arrcelianetvros = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
 arrcelianetelros= [
["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrcelianeuprotp = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
arrcelianefuncip = [
 ["javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image5('images/m4')", "images/m4.png", "Антрацит"]
  ],
  
  
  arralletikamas  = [ ],
 arrallvalenaclassmas = [ ],
 arrallvalenalifemas = [ ],
 arrallvalenaalluremas = [ ],
 arrallcelianemas = [ ],
 arrallviklmas = [ ],
 arrallsilrosmas = [ ],
 arralltvrosmas = [ ],
 arralltelrosmas = [ ],
 arralluprotpmas = [ ], 
 arrallfuncipmas = [ ],
 arrallmexmas = [ ],
  
arralletika =  arralletikamas.concat(arretikavikl,arretikasilros, arretikatvros, arretikatelros, arretikauprotp, arretikafuncip);
arrallvalenaclass =  arrallvalenaclassmas.concat(arrvalenaclassvikl,arrvalenaclasssilros, arrvalenaclasstvros, arrvalenaclasstelros, arrvalenaclassuprotp, arrvalenaclassfuncip);
arrallvalenalife =  arrallvalenalifemas.concat(arrvalenalifevikl,arrvalenalifesilros, arrvalenalifetvros, arrvalenalifetelros, arrvalenalifeuprotp, arrvalenalifefuncip);
arrallvalenaallure =  arrallvalenaalluremas.concat(arrvalenaallurevikl,arrvalenaalluresilros, arrvalenaalluretvros, arrvalenaalluretelros, arrvalenaallureuprotp, arrvalenaallurefuncip);
arrallceliane =  arrallcelianemas.concat(arrcelianevikl,arrcelianesilros, arrcelianetvros, arrcelianetelros, arrcelianeuprotp, arrcelianefuncip);

arrallvikl =  arrallviklmas.concat(arretikavikl, arrvalenaclassvikl, arrvalenalifevikl, arrvalenaallurevikl, arrcelianevikl);
arrallsilros = arrallsilrosmas.concat(arretikasilros, arrvalenaclasssilros, arrvalenalifesilros, arrvalenaalluresilros, arrcelianesilros);
arralltvros = arralltvrosmas.concat(arretikatvros, arrvalenaclasstvros, arrvalenalifetvros, arrvalenaalluretvros, arrcelianetvros);
arralltelros = arralltelrosmas.concat(arretikatelros, arrvalenaclasstelros, arrvalenalifetelros, arrvalenaalluretelros, arrcelianetelros);
arralluprotp = arralluprotpmas.concat(arretikauprotp, arrvalenaclassuprotp, arrvalenalifeuprotp, arrvalenaallureuprotp, arrcelianeuprotp);
arrallfuncip = arrallfuncipmas.concat(arretikafuncip, arrvalenaclassfuncip, arrvalenalifefuncip, arrvalenaallurefuncip, arrcelianefuncip);
arrallmex = arrallmexmas.concat(arrallvikl, arrallsilros, arralltvros, arralltelros, arralluprotp, arrallfuncip);  

  content_el3 = document.querySelector(".ere3")



if (document.getElementById("display_avatar2").value =='allleg') { 
 if (document.getElementById("display_avatar6").value =='allmax') {
  
arrallmex = []; return arrr2 = arrallmex;
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = []; arrr2 = arrallvikl;
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrallsilros;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arralltvros;arrr2 = [];
 } 
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arralltelros;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arralluprotp;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrallfuncip;arrr2 = [];
 }  
 }
 

else if (document.getElementById("display_avatar2").value =='etika') {  
 if (document.getElementById("display_avatar6").value =='allmax') {
arralletika = []; arrr2 = arralletika;
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arretikavikl;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arretikasilros;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arretikatvros;arrr2 = [];
 } 
else if (document.getElementById("display_avatar6").value == 'telros') {
arrr2 = arretikatelros;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arretikauprotp;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arretikafuncip;arrr2 = [];
 }  
 } 
 
 else if (document.getElementById("display_avatar2").value == 'valenaclass') {  
 if (document.getElementById("display_avatar6").value == 'allmax') {
 return arrr2 = []; arrr2 = arrallvalenaclass;
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenaclassvikl;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenaclasssilros;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenaclasstvros;arrr2 = [];
 } 
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenaclasstelros;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenaclassuprotp;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenaclassfuncip;arrr2 = [];
 }  
 } 
  else if (document.getElementById("display_avatar2").value =='valenalife') {  
 if (document.getElementById("display_avatar6").value =='allmax') {
  arrr2 = arrallvalenalife;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenalifevikl;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenalifesilros;arrr2 = [];
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenalifetvros;arrr2 = [];
 } 
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenalifetelros;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenalifeuprotp;arrr2 = [];
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenalifefuncip;arrr2 = [];
 }  
 } 
 else if (document.getElementById("display_avatar2").value =='valenaallure') {  

   if (document.getElementById("display_avatar6").value =='allmax') {
  arrr2 = arrallvalenaallure;
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrvalenaallurevikl;
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrvalenaalluresilros;
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrvalenaalluretvros;
 } 
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrvalenaalluretelros;
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrvalenaallureuprotp;
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrvalenaallurefuncip;
 }  
 } 
  else if (document.getElementById("display_avatar2").value == 'celiane') {  
    if (document.getElementById("display_avatar6").value =='allmax') {
  arrr2 = arrallceliane;
 }
else if (document.getElementById("display_avatar6").value =='vikl') {
arrr2 = arrcelianevikl;
 }
else if (document.getElementById("display_avatar6").value =='silros') {
arrr2 = arrcelianesilros;
 }
else if (document.getElementById("display_avatar6").value =='tvros') {
arrr2 = arrcelianetvros;
 } 
else if (document.getElementById("display_avatar6").value =='telros') {
arrr2 = arrcelianetelros;
 }  
else if (document.getElementById("display_avatar6").value =='uprotp') {
arrr2 = arrcelianeuprotp;
 }  
else if (document.getElementById("display_avatar6").value =='funcip') {
arrr2 = arrcelianefuncip;
 }  
 }
 
 

 
arrr2.forEach((attrs3) => {
  // создание элемента
  div13 = document.createElement("div");
  div23 = document.createElement("div");
  a3 = document.createElement("a");
  img3 = document.createElement("img");

  // добавление классов
  div13.classList.add("varic2");
  img3.classList.add("notact2");

  // установка атрибутов и текста
  a3.href = attrs3[0];
  img3.src = attrs3[1];
  div23.innerText = attrs3[2];



  // внутрь элемента a добавить элемент img
  a3.appendChild(img3);
  // внутрь элемента div добавить элемент a
  div13.appendChild(a3);
  div13.appendChild(div23);

  // внутрь элемента body добавить элемент div
  content_el3.appendChild(div13)
  
});

}


<select class="select-css" name="display_avatar2" id="display_avatar2" style="display: block"  onchange="maxa1(this)"> 
<option value="allleg"  selected >Все коллекции</option>
<option value="etika" >Etika</option>
<option value="valenaclass" >Valena Classic</option> 
<option value="valenalife"  >Valena Life</option> 
<option value="valenaallure" >Valena Allure</option>
<option value="celiane"  >Celiane</option> 
</select>

<select class="select-css" name="display_avatar6" id="display_avatar6" style="display: block" > 
<option value="allmax"  checked onclick="l_image2 ();">Все механизмы</option>
<option value="vikl"  onclick="l_image2 ();">Выключатели и переключатели</option>
<option value="silros" onclick="l_image2 ();">Силовые розетки</option> 
<option value="tvros"  onclick="l_image2 ();">TV-аудио-видео розетки</option> 
<option value="telros"  onclick="l_image2 ();">Телефонные и информационные розетки</option>
<option value="uprotp"  onclick="l_image2 ();">Управление отоплением</option> 
<option value="funcip"  onclick="l_image2 ();">Функция IP44</option> 
</select>

 <div class="ere3"></div>

Ответы (2 шт):

Автор решения: Darth

У вас данные изначально неверно организованы. Вы зачем-то часть данных (категории) засунули в имена переменных. А что будет, когда у вас будет не 2 селекта, а 8? И в каждом по 10 вариантов? Вы 80 массивов с разными названиями сделаете? Ifы будете писать 8ьми вложенные? Гораздо проще сделать один массив, в котором будут указаны категории и фильтровать уже его по этим полям. Выглядеть это должно примерно так:

function maxa1() {
    const arr = [
      // Категория 1, категория 2, href, src, text
      ["etika", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "vikl", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
      ["oops", "vikl", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
      ["etika", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "tvros", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "uprotp", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
      ["celiane", "funcip", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
      ["oops", "tvros", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
      ["etika", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "uprotp", "javascript:l_image5('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", "javascript:l_image5('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "tvros", "javascript:l_image5('images/m2')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", "javascript:l_image5('images/m2')", "images/m2.png", "Белый"],
      ["oops", "silros", "javascript:l_image5('images/m1')", "images/m1.png", "Антрацит"],
    ];

    const collectValue = document.getElementById("display_avatar2").value;
    const mechTypeValue = document.getElementById("display_avatar6").value;

    const content_el3 = document.querySelector(".ere3");
    content_el3.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
  }
<select class="select-css" name="display_avatar2" id="display_avatar2" style="display: block"  onchange="maxa1()"> 
  <option value="allleg"  selected >Все коллекции</option>
  <option value="etika" >Etika</option>
  <option value="valenaclass" >Valena Classic</option> 
  <option value="valenalife"  >Valena Life</option> 
  <option value="valenaallure" >Valena Allure</option>
  <option value="celiane"  >Celiane</option> 
</select>

<select class="select-css" name="display_avatar6" id="display_avatar6" style="display: block"   onchange="maxa1()"> 
  <option value="allmax"  checked onclick="l_image2 ();">Все механизмы</option>
  <option value="vikl"  onclick="l_image2 ();">Выключатели и переключатели</option>
  <option value="silros" onclick="l_image2 ();">Силовые розетки</option> 
  <option value="tvros"  onclick="l_image2 ();">TV-аудио-видео розетки</option> 
  <option value="telros"  onclick="l_image2 ();">Телефонные и информационные розетки</option>
  <option value="uprotp"  onclick="l_image2 ();">Управление отоплением</option> 
  <option value="funcip"  onclick="l_image2 ();">Функция IP44</option> 
</select>

<div class="ere3"></div>

→ Ссылка
Автор решения: Уоли Клуд
 const arr = [
      // Категория 1, категория 2, href, src, text
      ["etika", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "vikl", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "vikl", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
      ["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "tvros", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "uprotp", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "funcip", jsimg + "('images/m2')", "images/m2.png", "Белый"],
      ["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "uprotp", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "tvros", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
    ];

    const collectValue = document.getElementById("display_avatar2").value;
    const mechTypeValue = document.getElementById("display_avatar6").value;
    
    const content_el1 = document.querySelector(".ere");
    const content_el2 = document.querySelector(".ere2");
    const content_el3 = document.querySelector(".ere3");
    const content_el4 = document.querySelector(".ere4");
    const content_el5 = document.querySelector(".ere5");

    content_el1.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
    

    content_el2.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
    content_el3.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
      content_el4.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
      
      content_el5.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == "allleg" || collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `)
.join("");






 const arr2 = [
      // Категория 1, категория 2, href, src, text
      ["etika", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "vikl", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "vikl", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "vikl", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
      ["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "tvros", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "uprotp", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "funcip", jsimg + "('images/m2')", "images/m2.png", "Белый"],
      ["etika", "silros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaclass", "uprotp", jsimg + "('images/m2')", "images/m2.png", "Антрацит"],
      ["valenalife", "telros", jsimg + "('images/m1')", "images/m1.png", "Белый"],
      ["valenaallure", "tvros", jsimg + "('images/m1')", "images/m1.png", "Антрацит"],
      ["celiane", "vikl", jsimg + "('images/m2')", "images/m2.png", "Белый"],
    ];

    const collectValue2 = document.getElementById("display_avatar3").value;
    const mechTypeValue2 = document.getElementById("display_avatar7").value;
    
    const content_el12 = document.querySelector(".ere");
    const content_el22 = document.querySelector(".ere2");
    const content_el32 = document.querySelector(".ere3");
    const content_el42 = document.querySelector(".ere4");
    const content_el52 = document.querySelector(".ere5");

    content_el12.innerHTML = arr2
      .filter(([collect, mechtype]) => {
        return (collectValue2 == "allbit" || collectValue2 == collect)
        && (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
    

    content_el22.innerHTML = arr2
      .filter(([collect, mechtype]) => {
        return (collectValue2 == "allbit" || collectValue2 == collect)
        && (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
    content_el32.innerHTML = arr2
      .filter(([collect, mechtype]) => {
        return (collectValue2 == "allbit" || collectValue2 == collect)
        && (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
      content_el42.innerHTML = arr2
      .filter(([collect, mechtype]) => {
        return (collectValue2 == "allbit" || collectValue2 == collect)
        && (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `).join("");
      
      
      content_el52.innerHTML = arr2
      .filter(([collect, mechtype]) => {
        return (collectValue2 == "allbit" || collectValue2 == collect)
        && (mechTypeValue2 == "allmax2" || mechTypeValue2 == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <div class="varic2">
          <a href="${href}">
            <img class="notact2" src="${src}" />
          </a>
          <div>${text}</div>
        </div>
      `)
.join("");

Когда всего один массив все работает, но если добавить второй как в коде, не работает. Ну и как то это оптимизировать, сам я не понимаю как.

→ Ссылка