БЛОГ НА HUSL


JS. Контролировать id элементов после добавления в html через appendTo, теряется порядок

Автор вопроса: Amigo9876

В общем по клику по кнопке, через appendTo добавляю какой-то инпут допустим.

При повторном клике мне нужно добавить еще один инпут но уже с другим id, чтобы можно было потом выцепить оттуда данные.

clicks = 0
$(.button).click(function(){
  clicks+=1
  append_text = '<input id="super' + clicks + '" type="number">'
  $(append_text).appendTo('.add_block_gates')
}

Там же есть и кнопка удаления. Там clicks -=1

Но вот проблема. Посмотрите в примере блок "Добавить ворота". Добавьте 3 штуки, удалите последний, и снова добавьте еще один. Появятся дубляжи, потому что click+-1 - плохое решение.

Как это правильно сделать, чтобы было рабочим?

const fence_price = [ // Стоимость забора по вертикали - толщина прутка, по горизонтали - высота забора
    [1237, 1280, 1398, 0], // 3mm
    [1377, 1589, 1878, 0], // 3.5mm
    [1657, 1797, 2199, 2799], // 4mm
    [2448, 2691, 3498, 3696], // 5mm - для 1.5м, 1.7м, 2м и 2.4м
]

const fence_param_h = [1.5, 1.7, 2, 2.4];
const prut_param = [3, 3.5, 4, 5];
const stolb_name = ['50х50мм', '60х60мм', '80х80мм'];

const stolb_price = [1000, 1330, 1990] // Стоимость столбов
const gates_price = [17900, 19900, 22900]; // Ворота: 3.5x1.5, 4x1.7, 4x2
const sm_gates_price = [7900, 9000, 9900]; // Калитки: 0.8x1.5, 1x1.7, 1x2
// Стоимость установки забора в зависимости от длины:
const install_price = [0, 620, 550, 430, 400, 370] // до50, от 50, от 75, от 100, от....
const install_gate_price = 7000; // Установка забора
const install_smgate_price = 3500; // Установка калитки

let fence_length = 0;
let fence_height_type = 0;
let prut_type = 0;
let stolb_type = 0;

let count_fence_section = 0;
let count_stolb = 0;

let gates_type1 = 0;
let gates_type2 = 0;
let gates_type3 = 0;
let smgates_type1 = 0;
let smgates_type2 = 0;
let smgates_type3 = 0;



function get_data_online() {
    fence_length = $('#fence_lenght').val();
    fence_height_type = $('#fence_height').val();
    prut_type = $('#prutok_width').val();
    stolb_type = $('#stolb_type').val();
}

function calc_online() {
    count_fence_section = Math.ceil(fence_length/2.5);
    count_stolb = count_fence_section + 1;
    let fence_sect_cost = fence_price[prut_type][fence_height_type]; 
    let total_cost_fence = count_fence_section * fence_sect_cost;
    let total_cost_stolb = count_stolb * stolb_price[stolb_type];
    
    
    
        
        
    /// Добавление данных:
    $('#result_lenght').html(fence_length)
    $('#result_height').html(fence_param_h[fence_height_type])
    $('#result_prutok').html(prut_param[prut_type])
    $('#result_count_s').html(count_fence_section)
    $('#result_fence_price').html(fence_sect_cost)
    $('#result_fence_cost').html(total_cost_fence)
    $('#stolb_name').html(stolb_name[stolb_type])
    $('#res_stolb_count').html(count_stolb)
    $('#res_stolb_price').html(stolb_price[stolb_type])
    $('#result_stolb_cost').html(total_cost_stolb)
    
    $('#test1').html($('#appended_gates1').val())
}

let extra_blocks = {}
let ebc = 0;
let ebc_arr = [];

$('#add_gates').click(function(){ // Добавление блоков
    ebc+=1
    ebc_arr.push(ebc)
    let select_for_append = '<select name="" class="added_gates" id="appended_gates' + ebc +'"><option value="1">Ворота 3.5м на 1.5м</option><option value="2">Ворота 4м на 1.7м</option><option value="3">Ворота 4м на 2м</option></select>'
    
    let append_text = '<div id="ebcdel' + ebc + '"><p>Ворота №' + ebc + '</p>' + select_for_append + '<button class="delete_button" id="del' + ebc + '">Удалить эти ворота</button></div>'
    
    $(append_text).appendTo('.add_block_gates')
    
    
})

// Удаление блоков
 // Так как блок добавлен с помощью append, то запрос должен идти именной такой:
$(document).on('click', '.delete_button', function(elem){
    let his_id = $(this).attr('id');
    let als = his_id.split('')[3];
  
    $('#ebc' + his_id).remove()
    ebc -=1;
})



$('.main_calc_wrapper').click(function(){
    get_data_online()
    calc_online()
    
})

$('.main_calc_wrapper').on('keyup', function (){
    get_data_online()
    calc_online()
                       })
.main_calc_block {
    width: 1140px;
    margin: 0 auto;
    display: block;
    font-size: 18px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}

.main_calc_wrapper, .main_result_wrapper {
    width: calc(100% - 60px);
    padding: 20px 30px;
    float: left;
    -webkit-box-shadow: 0 0 3px 0 #D1D1D1;
box-shadow: 0 0 3px 0 #D1D1D1;
}

.calc_section_half {
    width: 50%;
    float: left;
    display: block;
    margin: 0 auto;
}

.calc_section_full {
    width: 100%;
    float: left;
    display: block;
    margin: 0 auto;
    padding: 10px 0px;
}

.result_calc_line {
    width: calc(100% - 40px);
    margin: 0 auto;
    border-bottom: 1px solid #e2e2e2;
    float: left;
    padding: 0px 20px;
}

.result_calc_line:nth-child(2n) {
    background: #e6f7e6;
}

.rcl_1, .rcl_2 {
    width: 80%;
    float: left;
    display: block;
    padding: 10px 0px;
}

.rcl_2 {
    width: 20%;
}

.add_block_gates {
    margin-top: 30px;
}

#add_gates {
    min-width: 230px;
    border-radius: 5px;
    text-transform: none;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    color: #000;
    background-color: #fbe630;
    border: 0;
    -webkit-transition: -webkit-box-shadow .3s ease;
    -o-transition: box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .225s ease;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fceb36), to(#f7d219));
    background-image: -o-linear-gradient(top, #fceb36, #f7d219);
    background-image: linear-gradient(to bottom, #fceb36, #f7d219);
    -webkit-box-shadow: 0 1.15rem 1.75rem -0.4rem rgb(0 0 0 / 15%);
    box-shadow: 0 1.15rem 1.75rem -0.4rem rgb(0 0 0 / 15%);
    font-size: 18px;
    padding: 5px 0px 10px 0px;
}

#add_gates:hover, #add_gates:focus {
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 38%);
}

#add_gates img {
    width: 40px;
    position: relative;
    top: 5px;
    right: 10px;
}

.delete_button {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
    background: rgb(242,245,246); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding: 10px 20px;
    border: 1px solid #9bb99e;
    margin-left: 20px;
}

.delete_button:focus, .delete_button:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 0 3px 0 #C4C4C4;
box-shadow: 0 0 3px 0 #C4C4C4;
}

/* Это чисто включатель-выключатель */


.checkboxcalc {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}
.checkboxcalc + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}
.checkboxcalc + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
  transition: .2s;
}
.checkboxcalc + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: .2s;
}
.checkboxcalc:checked + label:before {
  background: #29bb44;
}
.checkboxcalc:checked + label:after {
  left: 26px;
}
.checkboxcalc:focus + label:before {
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(137, 178, 204, 0.7);
}
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Забор гиттер</title>
    <link rel="stylesheet" href="css/gitter.css">
</head>
<body>
    
<div class="main_calc_block">
    <div class="main_calc_wrapper">
        <div class="calc_section_half">
            <p>Длина забора</p>
            <input type="number" min="10" id="fence_lenght" value="10">
        </div>
        <div class="calc_section_half">
            <p>Высота забора:</p>
            <select name="" id="fence_height">
                <option value="0">1.5м</option>
                <option value="1">1.7м</option>
                <option value="2">2.0м</option>
                <option value="3">2.4м</option>
            </select>
        </div>
        <div class="calc_section_half">
            <p>Толщина прутка</p>
            <select name="" id="prutok_width">
                <option value="0">3.0мм</option>
                <option value="1">3.5мм</option>
                <option value="2">3.8мм</option>
                <option value="3">5.0мм</option>
            </select>
        </div>
        <div class="calc_section_half">
            <p>Столбы</p>
            <select name="" id="stolb_type">
                <option value="0">50х50мм</option>
                <option value="1">60х60мм</option>
                <option value="2">80х80мм</option>
            </select>
        </div>
        <div class="calc_section_half add_block_gates">
            <button id='add_gates'><img src="img/gates.png" alt="">Добавить ворота</button>
        </div>
        
        
        
        <div class="calc_section_half">Добавить калитку</div>
        <div class="calc_section_full">
            <input type="checkbox" class="checkboxcalc" id="install_fence" checked/>
            <label for="install_fence"><span>Монтаж забора</span></label>
        </div>
        <div class="calc_section_full insgat unvisible_bl">
            <input type="checkbox" class="checkboxcalc" id="install_gates" />
            <label for="install_gates"><span>Монтаж ворот</span></label>
        </div>
        <div class="calc_section_full insgts unvisible_bl">
            <input type="checkbox" class="checkboxcalc" id="install_sm_gates" />
            <label for="install_sm_gates"><span>Монтаж калитки</span></label>
        </div>
    </div>
    
    <div class="main_result_wrapper">
        <div class="result_calc_line">
           <div class="rcl_1">Забор <span id="result_lenght">50</span>м, (<span id="result_height">2.0</span>м/<span id="result_prutok">3.8</span>мм), секций: <span id="result_count_s">20</span>шт по <span id="result_fence_price"></span> руб.</div>
            <div class="rcl_2"><span id="result_fence_cost">14400</span></div>
        </div>
        <div class="result_calc_line">
            <div class="rcl_1">Столбы <span id="stolb_name">60х60мм</span>, <span id="res_stolb_count">21</span>шт, по цене <span id="res_stolb_price">1330 </span> руб.</div>
            <div class="rcl_2"><span id="result_stolb_cost"></span></div>
        </div>
        <div class="result_calc_line"><span id="test1"></span></div>
        <div class="result_calc_line">Калитка - 1шт</div>
        <div class="result_calc_line">Установка забора - 60м</div>
        <div class="result_calc_line">Установка калитки (1шт)</div>
        <div class="result_calc_line">Установка ворот (1шт)</div>
        <div class="result_calc_line">Итого:</div>
    </div>
</div>

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/gitter.js"></script>

</body>


Источник

Ответы (1 шт):

Автор решения: Pavel Nazarian

Для удаление ворот можно использовать метод closest().

$(this).closest('div').remove();

Для правильного отображения порядкового номера ворот можно вызывать функцию, которая будет динамически подсчитывать количество блоков и присваивать номер. Функция вызывается как при добавлении так и при удалении ворот. В ней также будет присваиваться динамический id, понятный для последующего обращения к этому блоку. В родительский блок для удобства добавил класс gates. Также добавил класс gate-number для тега p.

function gateCounter(){
  $('.gates > div').each(function(index){
    let number = index+1;
    $(this).find('.gate-number').text('Ворота №'+number);
    $(this).attr('id','gate'+number);
  })
}


const fence_price = [ // Стоимость забора по вертикали - толщина прутка, по горизонтали - высота забора
    [1237, 1280, 1398, 0], // 3mm
    [1377, 1589, 1878, 0], // 3.5mm
    [1657, 1797, 2199, 2799], // 4mm
    [2448, 2691, 3498, 3696], // 5mm - для 1.5м, 1.7м, 2м и 2.4м
]

const fence_param_h = [1.5, 1.7, 2, 2.4];
const prut_param = [3, 3.5, 4, 5];
const stolb_name = ['50х50мм', '60х60мм', '80х80мм'];

const stolb_price = [1000, 1330, 1990] // Стоимость столбов
const gates_price = [17900, 19900, 22900]; // Ворота: 3.5x1.5, 4x1.7, 4x2
const sm_gates_price = [7900, 9000, 9900]; // Калитки: 0.8x1.5, 1x1.7, 1x2
// Стоимость установки забора в зависимости от длины:
const install_price = [0, 620, 550, 430, 400, 370] // до50, от 50, от 75, от 100, от....
const install_gate_price = 7000; // Установка забора
const install_smgate_price = 3500; // Установка калитки

let fence_length = 0;
let fence_height_type = 0;
let prut_type = 0;
let stolb_type = 0;

let count_fence_section = 0;
let count_stolb = 0;

let gates_type1 = 0;
let gates_type2 = 0;
let gates_type3 = 0;
let smgates_type1 = 0;
let smgates_type2 = 0;
let smgates_type3 = 0;



function get_data_online() {
    fence_length = $('#fence_lenght').val();
    fence_height_type = $('#fence_height').val();
    prut_type = $('#prutok_width').val();
    stolb_type = $('#stolb_type').val();
}

function calc_online() {
    count_fence_section = Math.ceil(fence_length/2.5);
    count_stolb = count_fence_section + 1;
    let fence_sect_cost = fence_price[prut_type][fence_height_type]; 
    let total_cost_fence = count_fence_section * fence_sect_cost;
    let total_cost_stolb = count_stolb * stolb_price[stolb_type];
    
    
    
        
        
    /// Добавление данных:
    $('#result_lenght').html(fence_length)
    $('#result_height').html(fence_param_h[fence_height_type])
    $('#result_prutok').html(prut_param[prut_type])
    $('#result_count_s').html(count_fence_section)
    $('#result_fence_price').html(fence_sect_cost)
    $('#result_fence_cost').html(total_cost_fence)
    $('#stolb_name').html(stolb_name[stolb_type])
    $('#res_stolb_count').html(count_stolb)
    $('#res_stolb_price').html(stolb_price[stolb_type])
    $('#result_stolb_cost').html(total_cost_stolb)
    
    $('#test1').html($('#appended_gates1').val())
}

let extra_blocks = {}
let ebc_arr = [];

$('#add_gates').click(function(){ // Добавление блоков        
    let select_for_append = '<select name="" class="added_gates"><option value="1">Ворота 3.5м на 1.5м</option><option value="2">Ворота 4м на 1.7м</option><option value="3">Ворота 4м на 2м</option></select>'
    
    let append_text = '<div><p class="gate-number"></p>' + select_for_append + '<button class="delete_button">Удалить эти ворота</button></div>'
    
    $(append_text).appendTo('.add_block_gates');
    gateCounter();
})

// Удаление блоков
 // Так как блок добавлен с помощью append, то запрос должен идти именной такой:
$(document).on('click', '.delete_button', function(){
    $(this).closest('div').remove();  
    gateCounter();
})



$('.main_calc_wrapper').click(function(){
    get_data_online()
    calc_online()
    
})

$('.main_calc_wrapper').on('keyup', function (){
    get_data_online()
    calc_online()
                       })
                       

function gateCounter(){
  $('.gates > div').each(function(index){
    let number = index+1;
    $(this).find('.gate-number').text('Ворота №'+number);
    $(this).attr('id','gate'+number);
  })
}
.main_calc_block {
    width: 1140px;
    margin: 0 auto;
    display: block;
    font-size: 18px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}

.main_calc_wrapper, .main_result_wrapper {
    width: calc(100% - 60px);
    padding: 20px 30px;
    float: left;
    -webkit-box-shadow: 0 0 3px 0 #D1D1D1;
box-shadow: 0 0 3px 0 #D1D1D1;
}

.calc_section_half {
    width: 50%;
    float: left;
    display: block;
    margin: 0 auto;
}

.calc_section_full {
    width: 100%;
    float: left;
    display: block;
    margin: 0 auto;
    padding: 10px 0px;
}

.result_calc_line {
    width: calc(100% - 40px);
    margin: 0 auto;
    border-bottom: 1px solid #e2e2e2;
    float: left;
    padding: 0px 20px;
}

.result_calc_line:nth-child(2n) {
    background: #e6f7e6;
}

.rcl_1, .rcl_2 {
    width: 80%;
    float: left;
    display: block;
    padding: 10px 0px;
}

.rcl_2 {
    width: 20%;
}

.add_block_gates {
    margin-top: 30px;
}

#add_gates {
    min-width: 230px;
    border-radius: 5px;
    text-transform: none;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    color: #000;
    background-color: #fbe630;
    border: 0;
    -webkit-transition: -webkit-box-shadow .3s ease;
    -o-transition: box-shadow .3s ease;
    transition: -webkit-box-shadow .3s ease;
    transition: box-shadow .3s ease;
    transition: box-shadow .3s ease, -webkit-box-shadow .225s ease;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fceb36), to(#f7d219));
    background-image: -o-linear-gradient(top, #fceb36, #f7d219);
    background-image: linear-gradient(to bottom, #fceb36, #f7d219);
    -webkit-box-shadow: 0 1.15rem 1.75rem -0.4rem rgb(0 0 0 / 15%);
    box-shadow: 0 1.15rem 1.75rem -0.4rem rgb(0 0 0 / 15%);
    font-size: 18px;
    padding: 5px 0px 10px 0px;
}

#add_gates:hover, #add_gates:focus {
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 38%);
}

#add_gates img {
    width: 40px;
    position: relative;
    top: 5px;
    right: 10px;
}

.delete_button {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
    background: rgb(242,245,246); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding: 10px 20px;
    border: 1px solid #9bb99e;
    margin-left: 20px;
}

.delete_button:focus, .delete_button:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 0 3px 0 #C4C4C4;
box-shadow: 0 0 3px 0 #C4C4C4;
}

/* Это чисто включатель-выключатель */


.checkboxcalc {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}
.checkboxcalc + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}
.checkboxcalc + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
  transition: .2s;
}
.checkboxcalc + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: .2s;
}
.checkboxcalc:checked + label:before {
  background: #29bb44;
}
.checkboxcalc:checked + label:after {
  left: 26px;
}
.checkboxcalc:focus + label:before {
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(137, 178, 204, 0.7);
}
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Забор гиттер</title>
    <link rel="stylesheet" href="css/gitter.css">
</head>
<body>
    
<div class="main_calc_block">
    <div class="main_calc_wrapper">
        <div class="calc_section_half">
            <p>Длина забора</p>
            <input type="number" min="10" id="fence_lenght" value="10">
        </div>
        <div class="calc_section_half">
            <p>Высота забора:</p>
            <select name="" id="fence_height">
                <option value="0">1.5м</option>
                <option value="1">1.7м</option>
                <option value="2">2.0м</option>
                <option value="3">2.4м</option>
            </select>
        </div>
        <div class="calc_section_half">
            <p>Толщина прутка</p>
            <select name="" id="prutok_width">
                <option value="0">3.0мм</option>
                <option value="1">3.5мм</option>
                <option value="2">3.8мм</option>
                <option value="3">5.0мм</option>
            </select>
        </div>
        <div class="calc_section_half">
            <p>Столбы</p>
            <select name="" id="stolb_type">
                <option value="0">50х50мм</option>
                <option value="1">60х60мм</option>
                <option value="2">80х80мм</option>
            </select>
        </div>
        <div class="calc_section_half add_block_gates gates">
            <button id='add_gates'><img src="img/gates.png" alt="">Добавить ворота</button>
        </div>
        
        
        
        <div class="calc_section_half">Добавить калитку</div>
        <div class="calc_section_full">
            <input type="checkbox" class="checkboxcalc" id="install_fence" checked/>
            <label for="install_fence"><span>Монтаж забора</span></label>
        </div>
        <div class="calc_section_full insgat unvisible_bl">
            <input type="checkbox" class="checkboxcalc" id="install_gates" />
            <label for="install_gates"><span>Монтаж ворот</span></label>
        </div>
        <div class="calc_section_full insgts unvisible_bl">
            <input type="checkbox" class="checkboxcalc" id="install_sm_gates" />
            <label for="install_sm_gates"><span>Монтаж калитки</span></label>
        </div>
    </div>
    
    <div class="main_result_wrapper">
        <div class="result_calc_line">
           <div class="rcl_1">Забор <span id="result_lenght">50</span>м, (<span id="result_height">2.0</span>м/<span id="result_prutok">3.8</span>мм), секций: <span id="result_count_s">20</span>шт по <span id="result_fence_price"></span> руб.</div>
            <div class="rcl_2"><span id="result_fence_cost">14400</span></div>
        </div>
        <div class="result_calc_line">
            <div class="rcl_1">Столбы <span id="stolb_name">60х60мм</span>, <span id="res_stolb_count">21</span>шт, по цене <span id="res_stolb_price">1330 </span> руб.</div>
            <div class="rcl_2"><span id="result_stolb_cost"></span></div>
        </div>
        <div class="result_calc_line"><span id="test1"></span></div>
        <div class="result_calc_line">Калитка - 1шт</div>
        <div class="result_calc_line">Установка забора - 60м</div>
        <div class="result_calc_line">Установка калитки (1шт)</div>
        <div class="result_calc_line">Установка ворот (1шт)</div>
        <div class="result_calc_line">Итого:</div>
    </div>
</div>

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/gitter.js"></script>

</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.