In JavaScript, I can't make unique values of arrays of strings, and exclude determinated values from another array

Only two problems:

• I can’t make unique values of arrays of strings in iterations and control flow. In my test, the iterations and control flow duplicated the values 18 times, and I tried to change a lot of codes in different way, but unsuccessfully.
• I learned from How can I remove a specific item from an array?, but my case is different, because two associative folders are different. I will explain:

  let titles = ["Adwaita++", "Suru++", "Yaru++"];
  let styles = ["adwaita", "suru", "yaru"];
  let categories = ["documents", "git", "github", "gitlab", "mac", "pictures", "musics", "script", "templates", "videos"];
  let colours = ["60spsychodelic", "90ssummer", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion", "yellow"];

Adwaita++, Suru++ and Yaru++ are names of icons themes, styles are themes of icons, and colours are folders colours. Almost all icons themes have all categories (the same number), and the same number of colours, but Adwaita++ does not have folder colours, for example, 60spsychodelic and 90ssummer, which are exclusive of Suru++. Suru++ also does not have certain folders colours, for example, canonical and vermillion. Then I want to exclude or remove the values.

You can see that the arrays of strings titles or styles and colours are totally different.

So I built iterations and three control flows:

 for (let a = 0; a < titles.length; a++)
  {
    const tt = titles[a];

      for (let i = 0; i < styles.length; i++) 
      {
        const style = styles[i];

        if (style == "adwaita") 
        {
          html+= '<h1>' + titles[0] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k];

              html+= "<p><code>"+styles[0]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }

        else if (style == "suru") 
        {
          html+= '<h1>' + titles[1] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k]
              
              html+= "<p><code>"+styles[1]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }

        else
        {
          html+= '<h1>' + titles[2] + '</h1>';
          for (let j = 0; j < categories.length; j++) 
          {
            const category = categories[j];
            
            for (let k = 0; k < colours.length; k++) 
            {
              const colour = colours[k];

              html+= "<p><code>"+styles[2]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
            }
          }  
        }
    }
  }

  document.write(html);

Now, let’s go to:

else if (style == "suru") 
{
  html+= '<h1>' + titles[1] + '</h1>';
  for (let j = 0; j < categories.length; j++) 
  {
    const category = categories[j];
    
    for (let k = 0; k < colours.length; k++) 
    {
      const colour = colours[k]
      
      html+= "<p><code>"+styles[1]+"-plus/folder-"+category+"-"+colour+".svg</code></p>";
    }
  }  
}

In this iteration colour, I tried to write the codes, that I got from How can I remove a specific item from an array?, that would remove the colours that do not exist in Suru++.

Well, I thought of:

let colours = ["60spsychodelic=[suru]", "90ssummer=suru]", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion=[yaru]", "yellow"];

It must be good, but Adwaita++ also needs vermillion, and if I remove [yaru], it will end up being included in Suru++, what is not good.

Only these two problems I can not fix. Although I prefer a dummy and simple code, you are free to write a condensed version only if you want.

You can check and will understand: https://github.com/gusbemacbe/suru-plus-folders/blob/master/languages/en.md

Here is the ready snnipet for you to test for discovering why it duplicated 18 times the group of values.

var html = '';
let titles = ["Adwaita++", "Suru++", "Yaru++"];
let styles = ["adwaita", "suru", "yaru"];
let categories = ["documents", "git", "github", "gitlab", "mac", "pictures", "musics", "script", "templates", "videos"];
let colours = ["60spsychodelic", "90ssummer", "adwaita", "blue", "bluegray", "bordeaux", "brown", "canonical", "cyberpunk", "green", "orange", "red", "vermillion", "yellow"];

for (let a = 0; a < titles.length; a++) {
  const tt = titles[a];

  for (let i = 0; i < styles.length; i++) {
    const style = styles[i];

    if (style == "adwaita") {
      html += '<h1>' + titles[0] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];

          html += "<p><code>" + styles[0] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    } else if (style == "suru") {
      html += '<h1>' + titles[1] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];
          html += "<p><code>" + styles[1] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    } else {
      html += '<h1>' + titles[2] + '</h1>';
      for (let j = 0; j < categories.length; j++) {
        const category = categories[j];

        for (let k = 0; k < colours.length; k++) {
          const colour = colours[k];

          html += "<p><code>" + styles[2] + "-plus/folder-" + category + "-" + colour + ".svg</code></p>";
        }
      }
    }
  }
}

document.write(html);