Как сделать GUI на основе множеств?

// функция переводит русские слова на латиницу это нужно для создания уникальных id для checkbox-ов 
function rus_to_latin ( str ) {
    
    var ru = {
        'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 
        'е': 'e', 'ё': 'e', 'ж': 'j', 'з': 'z', 'и': 'i', 
        'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 
        'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 
        'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch', 'ш': 'sh', 
        'щ': 'shch', 'ы': 'y', 'э': 'e', 'ю': 'u', 'я': 'ya',
    'ъ': 'ie', 'ь': '', 'й': 'i'
    }, n_str = [];
        
    for ( var i = 0; i < str.length; ++i ) {
       n_str.push(
              ru[ str[i] ]
           || ru[ str[i].toLowerCase() ] == undefined && str[i]
           || ru[ str[i].toLowerCase() ].replace(/^(.)/, function ( match ) { return match.toUpperCase() })
       );
    }
    
    return n_str.join('');
}
 
// селектор файла с рецептами
const recipesSelector = document.getElementById("recipe-selector");
 
recipesSelector.addEventListener('change', (event) => {
    
    const fileList = event.target.files;
    const file = fileList[0];
 
    const reader = new FileReader();
    reader.readAsText(file);
    
    
    // то что происходит после загрузки файла с рецептами
    reader.onload = function() {
        let text = reader.result;
        const recipes = JSON.parse(text)["recipes"]; // все рецепты из полученного файла
        
        const button = document.querySelector("#submit");
        const answer = document.querySelector("#answer");
 
        // кнопка обработки. Не работает, пока не загружен файл
        button.addEventListener("click", () => {
            
            // список всех выбранных ингредиентов
            const selected = [...document.querySelectorAll("input[id]:checked")].map(
                (input) => input.id
            );
            answer.innerHTML = ""; // очистка ответа
            let lines = 0; 
            
            //сравнение массива выбранных ингредиентов с массивом всех ингредиентов
            let intersectionsList = []; 
            let intersections; 
 
            for (recipe of recipes) {
 
                intersections = recipe.ingredients.filter((item) => 
                selected.includes(rus_to_latin(item).toLowerCase())) 
                recipeIntersections = {"name": recipe.name, "intersections": intersections} // словарь {имя, пересечения}
                intersectionsList.push(recipeIntersections); // добавляем словарь в список
 
            }
            
            // сортировка
            intersectionsList.sort((a, b) => {
                return b.intersections.length-a.intersections.length;
            });
 
            // вывод на экран ингредиентов 
            
            for (i of intersectionsList) {
 
                if (i.intersections.length !== 0){
                let line = document.createElement("hr");
                let nextLine = document.createElement("br");
                answer.append(i.intersections.join(", ") + ": " + i.name);
                answer.append(nextLine);
                answer.append(line);
                lines++;
 
                }
 
            }   
 
            if (lines === 0){
                answer.innerHTML = "Таких рецептов нет!";
            }
        });
    }
});
 
// селектор ингредиентов
const ingredientsSelector = document.getElementById('ingredient-selector');
ingredientsSelector.addEventListener('change', (event) => {
 
    const fileList = event.target.files;
    const file = fileList[0];
 
    const reader = new FileReader() 
    reader.readAsText(file);
 
    
    // функционал после загрузки файла с ингредиентами 
    reader.onload = function() {
        let text = reader.result
        let ingredients = JSON.parse(text)["ingredients"]
 
        let inputContainer = document.getElementById("input-container")
        inputContainer.innerHTML = "";
 
        // вывод всех ингредиентов из файла
 
        for(let i = 0; i<ingredients.length; i++) {
 
            let ingredientCheckbox = document.createElement("input")
            ingredientCheckbox.id = rus_to_latin(ingredients[i]).toLowerCase();
            ingredientCheckbox.type = "checkbox"
            
            let ingredientLabel = document.createElement("label")
            ingredientLabel.for = ingredientCheckbox.id
            ingredientLabel.id = ingredientCheckbox.id + "-label"
            ingredientLabel.innerHTML = ingredients[i] + "\n"
            
            let nextLine = document.createElement("br")
            inputContainer.append(ingredientCheckbox);
            inputContainer.append(ingredientLabel);
            inputContainer.append(nextLine)
 
        }
    }
});
 
// кнопка очистки выбора
let clearButton = document.getElementById("clear")
clearButton.addEventListener("click", () => {
 
    const selected = [...document.querySelectorAll("input[id]:checked")].map(
        (input) => input.id
    );
 
    for (ingredient of selected) {
 
        const getInput = document.getElementById(ingredient)
        getInput.checked = false;
 
    }
 
});
// кнопка "Выбрать все"
let checkAllButton = document.getElementById("check-all")
checkAllButton.addEventListener("click", () => {
 
    const inputs = [...document.querySelectorAll("input[id]")].map(
        (input) => input.id
    );
 
    for (ingredient of inputs) {
 
        const getInput = document.getElementById(ingredient)
        getInput.checked = true;
 
    }
 
});

fetch('/recipes.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });