Angular http.post() is status 200 (no error) but does not save in the database (sometimes)

I am working on an app that allows you to save recipes to a database. Frontend= Angular, backend= Spring, database= SQL (connected to my local machine). There's a recipe class, an ingredient class, and a step class; recipe and ingredient have a many-to-many relationship and so do recipe and step. My issue is, that when I submit a recipe to a database, it only submits all ingredients and all steps sometimes.

If I enter the same recipe the same way 10 times, it only successfully posts all ingredients and all steps maybe 2-3 times. Below, I have shared a screenshot of the join tables between recipe-ingredients and recipe-steps after submitting the same recipe 3 times (each recipe_id should have 5 ingredient_id's and 3 step_id's); as you can see, it posted successfully the first time only. SQL database tables

I have also shared a screenshot of the Network details for the 3rd time I posted it; according to it, the POST method was successful (status 200) for each ingredient and step (you can't see the details but you can see that it POSTed the correct number of times for addIngredients and addSteps), even though when you look at the database, only 2 of the 3 steps were saved. Can someone please help me figure out why it's not posting every ingredient or step every time but it is sometimes? It's literally random which ones save to the database and which ones don't, and I don't get any errors, so I am clueless. Network Details on submit

onSubmit function in Angular:

onSubmit() {
    for (let i = 0; i < this.ingredientsForRecipe.length; i++) {
      this.recipeService.addRecipeIngredient(this.recipeId, this.ingredientsForRecipe[i]).subscribe();
    }

    for (let i = 0; i < this.stepsForRecipe.length; i++) {
      this.recipeService.addRecipeStep(this.recipeId, this.stepsForRecipe[i]).subscribe();
    }
  }

relevant Angular service functions:

  public addRecipeIngredient(recipeId: number, ingredient: Ingredient) {
    const url = 'http://localhost:8080/recipes/' + recipeId + '/addIngredients';
    return this.http.post(url, ingredient);
  }

  public addRecipeStep(recipeId: number, step: Step) {
    const url = 'http://localhost:8080/recipes/' + recipeId + '/addSteps';
    return this.http.post(url, step);
  }

relevant Spring functions:

@PostMapping("recipes/{id}/addIngredients")
    public void addIngredientsToRecipe(@PathVariable("id") Integer recipeId, @RequestBody Ingredient ingredient) {
        Optional<Recipe> recipeResult = recipeRepository.findById(recipeId);
        Recipe recipe = recipeResult.get();
        RecipeIngredientDTO recipeIngredientDTO = new RecipeIngredientDTO();
        recipeIngredientDTO.setRecipe(recipe);
        recipeIngredientDTO.setIngredient(ingredient);
        recipe.addIngredient(ingredient);
        recipeRepository.save(recipe);
        ingredientRepository.save(ingredient);
    }

    @PostMapping("recipes/{id}/addSteps")
    public void addStepsToRecipe(@PathVariable("id") Integer recipeId, @RequestBody Step step) {
        Optional<Recipe> recipeResult = recipeRepository.findById(recipeId);
        Recipe recipe = recipeResult.get();
        RecipeStepDTO recipeStepDTO = new RecipeStepDTO();
        recipeStepDTO.setRecipe(recipe);
        recipeStepDTO.setStep(step);
        recipe.addStep(step);
        recipeRepository.save(recipe);
        stepRepository.save(step);
    }