Ion-checkbox event not working properly on else

I have a problem with my ion-checkbox event function. The else part its not working properly when I try to split some ingredients from a groceryList that I have. Splice its working but its removing the common ingredients from both recipes that I have.

What I am trying to achieve is : when i uncheck 1 recipe i need the ingredients from that recipe to not be in the groceryList anymore , but to keep the common ingredients from the recipes and also when I tick them back to see the correct amounts again.

My code looks like this :

else {
      let tickedRecipe = ev.detail.value;
      for (let recipe of this.recipes) {
        if (recipe.name === tickedRecipe) {
          recipe.ingredients.forEach((el) => {
            let matchedIng = this.groceryList.find(function (foundIng) {
              return foundIng.name === el.name;
            });
            if (matchedIng) {
              let index = this.groceryList.findIndex(
                (ingF) => ingF.name === matchedIng.name
              );
              this.groceryList.splice(index, 1);
            }
            let matchedH = this.untickedGroceryList.find(function (
              foundIngred
            ) {
              return foundIngred.name === el.name;
            });

            if (matchedH) {
              matchedH.quantity === matchedH - el.quantity;
              console.log(matchedH);
            }
          });
        }
      }
    }

As you can see when I untick one 2 of the ingredients that are in both recipes are gone , and I want to keep them separately if possible. How can I achieve that ? Thanks for help