JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<form action="" class="calculator">
  <div id="calculator__row_0" class="row">

    <div class="fields">

      <select name="carpet" id="carpet_0" onchange="summatory(0)" class="size-selector">
        <option value="60×85">60×85</option>
        <option value="85×150">85×150</option>
      </select>

      <select name="rent" id="rent_0" onchange="summatory(0)" class="rent-selector">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>

      <div class="quantity-block">
        <div class="calculator-button minus" id="minus_0"> - </div>

        <input id="quantity_0" type="number" pattern="^[0-9]+$" value="1" onchange="summatory(0)" class="quantity-field">

        <div class="calculator-button plus" id="plus_0"> + </div>
      </div>

    </div>

    <span id="result_0" class='price'>1</span>
    <div onclick="deleterow()" class="remove-row">×</div>
  </div>


</form>

<div onclick="addrow()" class="calculator-button add-row">Добавить строку</div>
<p id="total_price">Итого: </p>

CSS

.calculator {
  display: flex;
  justify-content: left;
  background-color: #eee;
}

.fields {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

.size-selector {
  width: 200px;
}

.rent-selector {
  width: 200px;
  }

.quantity-block {
  display: flex;
}

.calculator-button {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  border: 1px solid black;
}

.minus {}

.quantity-field {}

.plus {}

.price {
  height: 48px;
  line-height: 48px;
  width: 96px;
  background-color: red;
}

.remove-row {
  color: red;
  font-weight: bold;
  font-size: 24px;
}

.add-row {
  width: 256px;
  font-size: 18px;
}

JavaScript

let ind = 0;

function addrow() {
  ind = ind + 1;
  $(".calculator__form").append(
    "<div id='calculator__row_" + ind + "' class='calculator__row'>" +
    "<div class='calculator__fields'>" +
    "<select name='carpet' id='carpet_" + ind + "' onchange='summatory(" + ind + ")' class='size-selector'>" +
    "<option value='60×85'>60×85</option>" +
    "<option value='85×150'>85×150</option>" +
    "</select>" +
    "<select name='rent' id='rent_" + ind + "' onchange='summatory(" + ind + ")' class='rent-selector'>" +
    "<option value='1'>1</option>" +
    "<option value='2'>2</option>" +
    "</select>" +
    "<div class='quantity-block'>" +
    "<div class='calculator-button minus' id='minus_" + ind + "'> - </div>" +
    "<input type='number' id='quantity_" + ind + "' type='text' pattern='^[0-9]+$' value='1' onchange='summatory(" + ind + ")' class='quantity-field'>" +
    "<div class='calculator-button plus' id='plus_" + ind + "'> + </div>" +
    "</div>" +
    "</div>" +
    "<span id='result_" + ind + "' class='price'>1</span>" +
    "<div onclick='deleterow()' class='remove-row'>×</div>" +
    "</div>"
  )
  summatory(ind);
}

function summatory(ind) {

  let quantity = $('#quantity_' + ind + '')[0].value;

  let carpet_size_array = []; //массив размеров
  carpet_size_array['60×85_1'] = 210.00;
  carpet_size_array['60×85_2'] = 203.70;
  carpet_size_array['85×150_1'] = 255.00;
  carpet_size_array['85×150_2'] = 247.50;

  let size_value = $('#carpet_' + ind + '')[0].value;
  let rent_value = $('#rent_' + ind + '')[0].value;
  let rent_option = size_value + '_' + rent_value;
  let total_rent = carpet_size_array['' + rent_option + ''];

  let result = $('#result_' + ind + '');
  let multiply = total_rent * quantity;

  result.html(parseFloat(multiply.toFixed(2)).toLocaleString()); // вывод цены в одной

  let sum = 0,
    total_price = $("#total_price");

  $(".price").each(function() {
    sum += parseFloat($(this).text().replace(/\s/g, ''));
  })

 ...