Добавление новых полей с учетом id

by AJIEKCEU

HTML

<div class="product-selection cl">
								<label class="label-prod">Продукция:</label>
								<div class="product-selection_list">
									<div id="prod_1" class="prod cl">
										<div class="prod_field-wrp">
											<input class="name-prod" placeholder="Начните вводить название товара" type="text" name="SEND[zakaz][1][name]">
											<div class="listNameBox">
												<ul class="listName"></ul>
											</div>
										</div>
										<label class="label-count">Количество:</label>
										<div class="count-wrp">
											<a class="minus" href="#">-</a>
											<input class="number-prod" type="text" name="SEND[zakaz][1][count]" value="0">
											<a class="plus" href="#">+</a>
										</div>
									</div>
									<input type="button" class="add-button" value="Добавить продукт">
								</div>
							</div>

CSS

article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}.cnt ol,.cnt ul li,ol,ul{list-style:none}.bx_breadcrumbs ul:after,.cl:after,.pgn,hr{clear:both}.company-menu_link,.contacts_form .ttl,.contacts_info,.fields-wrp input[type=submit],.h-top_phones,.index-abou_title,.popup-ttl,.profile-section_item a,h1,h2{letter-spacing:.025em}.all_news,.blue-btn,.catalog-menu_link,.catalog_prod-info a,.catalog_prod-name,.company-description_title,.company-menu_link,.company-prospects_text .ttl,.contacts-form_btn,.contacts_form .ttl,.f_contacts .ttl,.f_copyright,.fields-wrp .ttl,.fields-wrp input[type=submit],.h-top_slogan,.index-abou_title,.lang,.listNameBox,.login-block,.nav_a,.news-title,.pgn a,.popup-ttl,.product h3,.profile-section_item a,.vacancy-name,h1,h2{text-transform:uppercase}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{cnt:none}hr{border:0;border-top:1px solid #dadada;margin:0 0 18px;padding:0}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}b,h1,h2,h3,h4{font-weight:700}input[type=text]:focus{outline:0}table{border-collapse:collapse;border-spacing:0}a...

JavaScript

/*Добавление нового товара*/
	var cur_zakaz = 1;
    $('.add-button').on('click', function(){
        var el = document.getElementById("prod_"+cur_zakaz);
        cur_zakaz++;
        var html = ''+
                '<div class="prod_field-wrp"><input class="name-prod" placeholder="Начните вводить название товара" type="text" name="SEND[zakaz]['+cur_zakaz+'][name]"><div class="listNameBox"><ul class="listName"></ul></div></div>'+
				'<label class="label-count">Количество:</label>'+
				'<div class="count-wrp"><a class="minus" href="#">-</a><input class="number-prod" type="text" name="SEND[zakaz]['+cur_zakaz+'][count]" value="0"><a class="plus" href="#">+</a></div>';
        var el_add = document.createElement("div");
        el_add.innerHTML = html;
        el_add.id = "prod_"+cur_zakaz;
        el.parentNode.insertBefore(el_add, el.nextSibling);
        el_add.className = "prod cl";
    });
    
	/*Изменения количества товара*/
	$(".product-selection").on('click', '.minus, .plus', function(e) {
        if ($(this).hasClass('minus')) {
            var data = $(this).next().val();
            if (data > 0) {
                $(this).next().val(parseInt(data) - 1);
            }
        }
        else{
            var data = $(this).prev().val();
            if (data >= 0) {
                $(this).prev().val(parseInt(data) + 1);
            }
        }
        e.preventDefault();
    });