Вёрстка + js калькулятора

Коллеги приветствую, есть задача – необходимо реализовать калькулятор и запись итоговых данных в скрытое поле формы.

Дизайн странички: prntscr.com/ekl276

Что от вас нужно:

1. Реализовать формировать таблицы выделенной в красный цвет и заверстать.

2. Таблица должна формироваться из массива данных на этой же страницы (дальше мы его сформируем из админки)

3. Реализовать расчёт расхода и суммы стоимости нужных продуктов.

Логика калькулятора:

1. Человек сверху вводит нужное количество метров prntscr.com/ekl364

2. Дальше может чек-боксами выбрать нужные товары, после выбора исходя из

характеристики расхода на метр формируется необходимый объём товара на

введённый метраж – prntscr.com/ekl447 и справа в столбце человек может выбрать сколько ему надо купить – и

исходя уже из этого столбца формируется стоимость продукта, и исходя

суммы продуктов формируется итоговая стоимость.

3. Далее данные передаются в скрытое поле формы ниже, при любом изменении данные в этом

поле должны меняться одновременно. чтобы в момент отправки всегда

передавалась информация о выбранных товарах и количестве.

Примечание: 

Товары имееют характеристики: название, расход, цена