Mengatasi duplikasi javascript / nodejs

Halo jadi saya sementara sedang membuat semacam shopping cart terkait resep makanan namun saya mengalami kendala yaitu duplikasi data pada shopping cart tersebut

ini code pada index.js

//GLOBAL VAR
const state = {};
const man = [];
................

//manual add to shopping list
const shoppingControl = (e) => {

  const count = e.target.closest('.recipe__idv').dataset.count;
  const unit = e.target.closest('.recipe__idv').dataset.unit;
  const ingredient = e.target.closest('.recipe__idv').dataset.ing;

  const item = new Manual(count,unit,ingredient);

  man.push(item);

  state.list = new List();
  man.forEach(el => {
     const item = state.list.addItem(el.count, el.unit, el.ingredients);
     listView.renderList(item);
  });

};

elements.recipe.addEventListener('click', e => {
  if(e.target.matches('.btn-decrease, .btn-decrease *')){

    if(state.recipe.servings > 1){
      state.recipe.updateServing('dec');
      recipeView.renderUpdateRecipe(state.recipe);
    }

  }else if(e.target.matches('.btn-increase, .btn-increase *')){
    state.recipe.updateServing('inc');
    recipeView.renderUpdateRecipe(state.recipe);

  } else if(e.target.matches('.recipe__btn--add, .recipe__btn--add *')){
    controlList();
  } else if(e.target.matches('.recipe__love, .recipe__love *')){
    likeControl();
  } else if(e.target.matches('.recipe__btn--idv, .recipe__btn--idv *')){
    shoppingControl(e);
  }

  recipeView.renderUpdateRecipe(state.recipe);
});

ini code pada view/resepView yg berfungsi merender sejumlah resep dari api

const renderIngredient = (ingredient) => `
  <li class="recipe__item">
    <svg class="recipe__icon">
        <use href="img/icons.svg#icon-check"></use>
    </svg>
    <div class="recipe__count">${formatCount(ingredient.count)}</div>
    <div class="recipe__ingredient">
        <span class="recipe__unit">${ingredient.unit}</span>
        ${ingredient.ingredient}
    </div>
    <div class="recipe__idv" data-count="${ingredient.count}" data-unit="${ingredient.unit}" data-ing="${ingredient.ingredient}">
			<button class="btn-small recipe__btn recipe__btn--idv">
				<svg class="search__icon">
						<use href="img/icons.svg#icon-shopping-cart"></use>
				</svg>
				<span>Add to shopping list</span>
			</button>
    </div>
	</li>
`;

ini code pada view/listView yg berfungsi menampilkan kumpulan bahan2 dari resep yg ingin dibeli

export const renderList = item => {
  const markup = `
    <li class="shopping__item" data-itemid="${item.id}">
      <div class="shopping__count">
          <input type="number" value="${item.count}" step="${item.count}" class="shopping__count-value">
          <p>${item.unit}</p>
      </div>
      <p class="shopping__description">${item.ingredient}</p>
      <button class="shopping__delete btn-tiny">
          <svg>
              <use href="img/icons.svg#icon-circle-with-cross"></use>
          </svg>
      </button>
    </li>
  `;

  elements.shoppingList.insertAdjacentHTML("beforeend",markup);
}

jadi flownya seperti ini - user mencari resep yg diiginkan lalu akan menampilkan resep beserta bahan2 yg dibutuhkan - tiap bahan2 dari resep tersebut, akan ada sebuah button dmn button trsebut berfungsi menambahkan bahan tersebut ke shopping list - ketika button di click, bahan2 akan ditampung pada sebuah object, lalu disimpan pada global variable "MAN" -ketika sudah disimpan pada array MAN, MAN akan di foreach dan akan memanggil fungsi yg berguna menyimpan data bahan2 pada local storage

permasalahanya terjadi ketika saya mencoba untuk store ke shopping list, data pada shopping list menjadi duplikat contoh bahan 1 -> event click => array MAN(1) bahan 2 -> event click => array MAN(1,1,2) bahan 2 -> event click => array MAN(1,1,2,3) dst

mohon cluenya ttng apa yg perlu sya lakukan terima kasih