JavaScript: Too many if-else statements?

I'm having a problem here with JS. I'm trying to make three lists of ingredients (for brewing potions) sorted by type, all of them are checkboxes within a tag.

You are supposed to select (check) one element of each of the three lists in order to brew a potion. If you select the right ingredients and you press the "Brew potion" button, you have a determined potion, if you select three ingredients that don't match, it displays a

at the bottom of the page saying "It seems it didn't work this time!" after pressing the "Brew potion" button.

In JavaScript, I've used an array for each of the three lists, using the document.getElementById for each of the elements in each list. Then, I've used an if and several else if statements to build the formulas, with an else statement at the end, in case the wrong checkboxes are checked and no potion comes out of the selected ingredients.

Everything works fine until I have more than three else if statments! Only the if and the first three * else if* work, but not the rest of these nor the else, which worked fine when I only had three else if. It simply doesn't display the message on the at the end except, again, for the first if and the first three else if statements.

I've shortened the code on purpose, leaving some ingredients and 'formulas' behind, in order not to overwhelm you. I've to say that sometimes several formulas use the same ingredient. I've tried chaning the numbers or erasing the else if for the formulas that use the same 'ingredient' but that doesn't work either.

I've revised the code several times, but couldn't find anything wrong. It really puzzles me.

function pociones() {

  var plantas = [document.getElementById("acacia"), document.getElementById("aceitedecoco"), //0-1
    document.getElementById("aceitedeoliva"), document.getElementById("algafila"), //2-3
    document.getElementById("agrimonia"), document.getElementById("asafetida"), //4-5
    document.getElementById("asaro"), document.getElementById("azafran"), //6-7
    document.getElementById("bellota"), document.getElementById("cabezadetortuga"), //8-9
    document.getElementById("calendula"), document.getElementById("cardamomo"), //10-11
    document.getElementById("clavo"), document.getElementById("consuelda"), //12-13
    document.getElementById("digitalis"), document.getElementById("escrofularia"), //14-15
    document.getElementById("gomapersa"), document.getElementById("hinojo"), //16-17
    document.getElementById("junipero"), document.getElementById("polemonium"), //18-19
    document.getElementById("stachys")
  ]; //20

  var partes = [document.getElementById("cerebrodedemonio"), document.getElementById("cerebrodedragon"), //0-1
    document.getElementById("cerebrodegigante"), document.getElementById("cerebrodemedium"), // 2-3
    document.getElementById("corazondeleon"), document.getElementById("corazondeminotauro"), //4-5
    document.getElementById("corazondepegaso"), document.getElementById("ectoplasma"), //6-7
    document.getElementById("escamadedragondeoro"), document.getElementById("esenciadefuegofatuo"), //8-9
    document.getElementById("esenciadeelemental"), document.getElementById("esporasdehongochillon"), //10-11
    document.getElementById("glanduladeanimal"), document.getElementById("glandulademagoogro"), //12-13
    document.getElementById("higadodeluciogigante"), document.getElementById("nubedevampiro"), //14-15
    document.getElementById("pieldelicantropo"), document.getElementById("pieldesucubo"), //16-17
    document.getElementById("plumadehipogrifo"), document.getElementById("sangrededragon"), //18-19
    document.getElementById("sangredehombrerata"), document.getElementById("sangredeogromago"), //20-21
    document.getElementById("sangredeninfa"), document.getElementById("sangredeogro"), //22-23
    document.getElementById("sangredetroll"), document.getElementById("sudordegigante"), //24-25
    document.getElementById("talamohumano")
  ]; //26


  var gemas = [document.getElementById("alejandrita"), document.getElementById("azabache"), //0-1
    document.getElementById("coral"), document.getElementById("cornalia"), //2-3
    document.getElementById("crisoprasa"), document.getElementById("diamante"), //4-5
    document.getElementById("hematita"), document.getElementById("lapislazuli"), //6-7
    document.getElementById("malaquita"), document.getElementById("onix"), //8-9
    document.getElementById("piedradeluna"), document.getElementById("rubi"), //10-11
    document.getElementById("serpentina"), document.getElementById("turquesa"), //12-13
    document.getElementById("zafiro"), document.getElementById("zircon")
  ]; //14-15

  var texto;

  if (plantas[0].checked && partes[17].checked && gemas[10].checked) {
    texto = "¡Has hecho una poción de polimorfar!";
  } else if (plantas[1].checked && partes[0].checked && gemas[14].checked) {
    texto = "¡Has hecho aceite etéreo!";
  } else if (plantas[2].checked && partes[14].checked && gemas[8].checked) {
    texto = "¡Has hecho aceite resbaladizo!";
  } else if (plantas[3].checked && partes[19].checked && gemas[11].checked) {
    texto = "¡Has hecho una poción de longevidad!";
  } else if (plantas[4].checked && partes[25].checked && gemas[7].checked) {
    texto = "¡Has hecho una poción de fuerza de gigante!";
  } else if (plantas[4].checked && partes[21].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción curación media!";
  } else if (plantas[5].checked && partes[4].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción de heroísmo!";
  } else if (plantas[6].checked && partes[20].checked && gemas[4].checked) {
    texto = "¡Has hecho una poción de disminución!";
  } else if (plantas[7].checked && partes[8].checked && gemas[0].checked) {
    texto = "¡Has hecho una poción de encontrar tesoro!";
  } else if (plantas[8].checked && partes[13].checked && gemas[12].checked) {
    texto = "¡Has hecho una poción de crecimiento!";
  } else if (plantas[8].checked && partes[5].checked && gemas[2].checked) {
    texto = "¡Has hecho una poción de super-heroísmo!";
  } else if (plantas[10].checked && partes[26].checked && gemas[3].checked) {
    texto = "¡Has hecho una poción de clarividencia!";
  } else if (plantas[10].checked && partes[7].checked && gemas[4].checked) {
    texto = "¡Has hecho una poción de invisibilidad!";
  } else if (plantas[12].checked && partes[6].checked && gemas[13].checked) {
    texto = "¡Has hecho una poción de velocidad!";
  } else if (plantas[13].checked && partes[23].checked && gemas[6].checked) {
    texto = "¡Has hecho una poción de curación ligera!";
  } else {
    texto = "El brebaje preparado no ha dado resultado...";
  }

  document.getElementById("solucion").innerHTML = texto;
}

<form>
  <div id="alquimia">
    <div id="plantas">
      <h3>Plantas</h3>
      <input type="checkbox" id="acacia">Acacia o goma arábiga<br>
      <input type="checkbox" id="aceitedecoco">Aceite de coco<br>
      <input type="checkbox" id="aceitedeoliva">Aceite de oliva<br>
      <input type="checkbox" id="algáfila">Algáfila<br>
      <input type="checkbox" id="agrimonia">Agrimonia<br>
      <input type="checkbox" id="asafetida">Asafétida<br>
      <input type="checkbox" id="asaro">Ásaro<br>
      <input type="checkbox" id="azafran">Azafrán<br>
      <input type="checkbox" id="bellota">Bellota<br>
      <input type="checkbox" id="cabezadetortuga">Cabeza de tortuga<br>
    </div>
    <div id="partes">
      <h3>Partes de bestias</h3>
      <input type="checkbox" id="cerebrodedemonio">Cerebro de demonio<br>
      <input type="checkbox" id="cerebrodedragon">Cerebro de dragón<br>
      <input type="checkbox" id="cerebrodegigante">Cerebro de gigante<br>
      <!--Poción de control de gigante-->
      <input type="checkbox" id="cerebrodemedium">Cerebro de médium<br>
      <input type="checkbox" id="corazondeleon">Corazón de león<br>
      <input type="checkbox" id="corazondeminotauro">Corazón de minotauro<br>
      <input type="checkbox" id="corazondepegaso">Corazón de pegaso<br>
      <input type="checkbox" id="ectoplasma">Ectoplasma<br>
      <input type="checkbox" id="escamadedragondeoro">Escama de dragon de oro<br>
      <input type="checkbox" id="esenciadefuegofatuo">Esencia de fuego fatuo<br>
      <input type="checkbox" id="esenciadeelemental">Esencia de elemental<br>
    </div>
    <div class="gemas">
      <h3>Gemas</h3>
      <input type="checkbox" id="alejandrita">Alejandrita<br>
      <input type="checkbox" id="azabache">Azabache<br>
      <input type="checkbox" id="coral">Coral<br>
      <input type="checkbox" id="cornalia">Cornalia<br>
      <input type="checkbox" id="crisoprasa">Crisoprasa<br>
    </div>
  </div>
  <br><br>
  <Button onclick="pociones()" type="button">¡Hacer poción!</Button>
</form>
<p id="solucion"></p>

Any help would be appreciated.

Javier

PS - Sorry that all the 'id' and texts are in Spanish, hope is understandable despite of it.