Как при помощи js создать поле дополнительных ингридиентов?

Anton, да речь идет только о фронте,никаких скидок не предусматривается,никаких налогов и купонов,а работать он будет примерно так

document.querySelector('ul').addEventListener(
  'change',
  (e) => {
    const sum = [...document.querySelectorAll('.price')]
      .reduce(
        (acc, el) => acc + (el.checked ? +el.dataset.price : 0),
        0,
      );
    document.querySelector('#total').innerText = sum;
  }
)

Как при помощи js создать поле дополнительных ингридиентов?

Anton, нашлось решение

<ul>
  <li>
    <label>
      <input type="checkbox" class="price" data-price="50">
      Опция 1 - 50₽
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" class="price" data-price="50">
      Опция 2 - 50₽
    </label>
  </li>
</ul>
<p>
  Итого: <span id="total">200</span>₽
</p>

но так как у меня цена динамичная и подгружается прямиком из wordpress то данный вариант не совсем подходит

Как при помощи js создать поле дополнительных ингридиентов?

Anton, сайт html+css+js+php без каких либо фреймворков,комплексный подход в каком плане?,нужно только добавить поле доп ингридиентов чтобы менялась цена товара и все.