Javascript 如何显示我的"；配料“；数组，仅在具有特定Id的特定配方的页面上呈现

如分享的屏幕截图所示，我创建了一个recipes应用程序，它创建了多个配方，每个配方都有一个唯一的id。现在，在每个配方中，我创建了一组配料。但我的问题是，所有配方都显示了相同的成分

    let textElem = document.querySelector('#some-input');
let rcps = getSavedRecipes()
const recipeId = location.hash.substring(1)
let recipe = rcps.find(function(recipe) {
    return recipe.id === recipeId
})

if (recipe === undefined) {
    location.assign('/index.html')
}

textElem.value = recipe.text;

let getSavedIngredients = () => {
    const ingredientsJSON = localStorage.getItem('ingredients')
    try {
        return ingredientsJSON ? JSON.parse(ingredientsJSON) : []
    } catch (e) {
        return []
    }
}

const saveIngredients = (ingredients) => {

    localStorage.setItem("ingredients", JSON.stringify(ingredients))
}

let ingredients = getSavedIngredients();

const renderIngredients = function(id) {

    // ingredients = id.ingredients;
    document.querySelector('#ingredients').innerHTML = ''

    ingredients.forEach(function(ingredient) {
        const ingredientEl = generateIngredientDOM(ingredient)
        document.querySelector('#ingredients').appendChild(ingredientEl)
    })
}


document.querySelector("#new-ingredient").addEventListener("submit", (e) => {
    e.preventDefault()
    const id = uuidv4()
    ingredients.push({
        text: e.currentTarget.elements.text.value,
        id: id
    })
    renderIngredients(ingredients)
    saveIngredients(ingredients)
        // location.assign(`/edit-recipe.html#${id}`)
    e.target.elements.text.value = ''
})

const generateIngredientDOM = function(ingredient) {
    const ingredientEl = document.createElement('div')
    const textEl = document.createElement('p')
    const chckBox = document.createElement('checkbox')
    const removeButton = document.createElement('button')

    if (ingredient.text.length > 0) {
        textEl.textContent = ingredient.text
    } else {
        textEl.textContent = 'Unnamed ingredient'
    }
    ingredientEl.appendChild(textEl)

    removeButton.textContent = 'remove'
    ingredientEl.appendChild(removeButton)
    removeButton.addEventListener('click', () => {
        removeIngredient(ingredient.id)
        saveIngredients(ingredients)
        renderIngredients(ingredient)
    })

    removeButton.setAttribute("style", "position:absolute;right:400px;");
    ingredientEl.setAttribute("style", "margin-top:10px;text-transform: capitalize;font-weight: 400px;display:flex");

    return ingredientEl
}

const removeIngredient = function(ingrd) {
    const ingredientIndex = ingredients.findIndex(function(ingredient) {
        return ingredient.id === ingrd
    })

    if (ingredientIndex > -1) {
        ingredients.splice(ingredientIndex, 1)
    }
}

这些是DOM的截图

渲染元素（成分）

看一看：虽然这是关于任务及其行动，但它可能与配方/成分足够相似，以允许您使用功能？