JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<section class="calculator">
  <form action="" class="calculator__form">
    <div id="calculator__row_0" class="calculator__row">

      <div class="calculator__fields">

        <select name="carpet" id="carpet_0" onchange="summatory(0)" class="calculator__size-selector calculator__field 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="calculator__rent-selector calculator__field selector">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>

        <div class="quantity-field quantity_field">
          <div class="quantity-arrow quantity-arrow_minus calculator-button" id="minus_0"> - </div>

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

          <div class="quantity-arrow quantity-arrow_plus calculator-button" id="plus_0"> + </div>
        </div>

      </div>

      <span id="result_0" class='price calculator__price calculator__field'>1</span>
      <div  class="calculator__remove-row calculator-button">×</div>
    </div>


  </form>

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

</section>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  color: #236EB4;
}

/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    background-color: rgb(196, 47, 47);
}
input[type=number]{
    -moz-appearance: textfield;
} */



.calculator {
  background-color: #F6F9FC;
  padding: 40px;
  border-radius: 20px;
}

.calculator__header {
  font-size: 65px;
  padding-bottom: 40px;
}

.calculator__hint {
  font-size: 24px;
  padding-bottom: 40px;
}

.calculator__row {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid;
}

.calculator__fields {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.calculator__field {
  width: auto;
  height: 96px;
  padding: 0 40px;
  font-size: 24px;
  border: none;
  border-radius: 8px;
  background-color: #fff;
  outline: none !important;
  transition: background .2s ease;
  /* text-align-last: center;  */
  /* text-align: center; */
  cursor: pointer;
}

.calculator__field:hover {
  background: #d9e9f8;
}

.calculator__field:active {
  background: #d9e9f8;
}

.calculator__rent-selector {
  width: auto;
}

.selector:focus {
  background: #d9e9f8;
  border-radius: 8px 8px 0 0;
}

.quantity-field {
  display: flex;
}

.calculator__quantity-selector {
  width: 120px;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  height: 96px;
  border-radius: 0;
  cursor: text;
}

.quantity-arrow {
  height: 96px;
  width: 96px;
  font-size: 48px;
  border: none;
  border-radius: 8px;
  background-color: #fff;
  transition: background .2s ease;
}

.quantity-arrow:hover {
  background: #d9e9f8;
  cursor: pointer;
}

.quantity-arrow:active {
  background: #8ab5dd;
}

.quantity-arrow_minus {
  border-radius: 8px 0 0 8px;
}

.quantity-arrow_plus {
  border-radius: 0px 8px 8px...

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='calculator__size-selector calculator__field 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='calculator__rent-selector calculator__field selector'>" +
                    "<option value='1'>1</option>" +
                    "<option value='2'>2</option>" +
                "</select>" +
                "<div class='quantity-field'>" +
                    "<div class='quantity-arrow quantity-arrow_minus calculator-button' id='minus_" + ind + "'> - </div>" +
                        "<input type='number' id='quantity_" + ind + "' type='text' pattern='^[0-9]+$' value='1' onchange='summatory(" + ind +")' class='calculator__quantity-selector calculator__field'>"+
                    "<div class='quantity-arrow quantity-arrow_plus calculator-button' id='plus_" + ind + "'> + </div>"+
                "</div>"+
            "</div>"+
            "<span id='result_" + ind + "' class='price calculator__price calculator__field'>1</span>"+
            "<div  class='calculator__remove-row calculator-button'>×</div>"+
        "</div>"
    )
    summatory(ind);
}

function  summatory(){
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 sum = 0;
    $(".calculator__row").each(function(){
    let name = $(this).find(".calculator__size-selector option:selected").val();
    let rent...