let not_favored = [...document.querySelectorAll(".not-favored")];

for(let index =0; index<not_favored.length;index++ ){


   // Allow type cast instead of doing it manually, recall '==' allows type casting while '===' doesn't
   console.log("the index of the children is " + not_favored[index].children[0].children[0].children[0].children[0].id + " and the index of the local_storage is " + localStorage.key(index+"") )
   if(not_favored[index].children[0].children[0].children[0].children[0].id == localStorage.key(index +"") && localStorage.key(index+"") !== null){
       console.log("how many times this occurs? Does it even work or compare key, which is the ID with the right index of that ID?")
       not_favored[index] = localStorage.getItem(localStorage.key(index.toString()))

    }
    else{
       not_favored[index] = not_favored[index].outerHTML;
     }

the index of the children is 0 and the index of the local_storage is 2
the index of the children is 1 and the index of the local_storage is 3
the index of the children is 2 and the index of the local_storage is null
the index of the children is 3 and the index of the local_storage is null
the index of the children is 4 and the index of the local_storage is null

the index of the children is 0 and the index of the local_storage is null
the index of the children is 1 and the index of the local_storage is null
the index of the children is 2 and the index of the local_storage is 2
the index of the children is 3 and the index of the local_storage is 3
the index of the children is 4 and the index of the local_storage is null