jQuery после .load() перестает корректно работать предыдущая form
Всем привет. Я новичок в jQuery и не могу разобраться, почему перестают работать предыдущие формы.
Есть 3 кнопки в форме. При нажатии на них они выделяются/подсвечиваются, а значение в Input меняется на 0/1
<form action="" id="upload-0" class="col-md-12" method="post" data-toggle="validator" enctype="multipart/form-data">
<div class="row">
<div class="col-md-3">
<div class="btn btn-block btn-sm prod_status prod_status_css_disabled">
ЛИДЕР ПРОДАЖ
<input type="hidden" name="prod_status_popular" value="0">
</div>
</div>
<div class="col-md-3">
<div class="btn btn-block btn-sm prod_status prod_status_css_disabled">
СКИДКА
<input type="hidden" name="prod_status_discount" value="0">
</div>
</div>
<div class="col-md-3">
<div class="btn btn-block btn-sm prod_status prod_status_css_disabled">
НОВИНКА
<input type="hidden" name="prod_status_new" value=0>
</div>
</div>
</div>
</form>
<div class="col-md-12">
<button type="button" class="add-new-form btn text-center btn-primary btn-sm col-md-12"><i class="fas fa-plus-circle"> Добавить</i></button>
</div>
к ним такой jQuery
function prod_status(){
$('div.prod_status').click(function (){
var input = $(this).find('input').val();
if(input == 1){
$(this).removeClass('prod_status_css_enabled')
$(this).addClass('prod_status_css_disabled')
$(this).find('input').val(0);
}else if(input == 0){
$(this).removeClass('prod_status_css_disabled')
$(this).addClass('prod_status_css_enabled')
$(this).find('input').val(1);
}
console.log(input);
})
} prod_status();
/*Добавляю такую же форму с 3 кнопка снизу. Она добавляется, но перестают работать кнопки в первой форме.*/
$("div button.add-new-form").click(function(){
var form_count = $('div').find('form').length;
var main_prod_form = '<form action="" id="upload-'+form_count+'" class="col-md-12" method="post" data-toggle="validator" enctype="multipart/form-data"></form>';
$('form.col-md-12').last().after(main_prod_form);
var load_in_form = 'form#upload-'+form_count;
$(load_in_form).load('/load/row-3-buttons',function () {
prod_status();
});
});
Добавляю такую же форму с 3 кнопка снизу. Она добавляется, но перестают работать кнопки в первой форме.
Пробывал сразу в html файле создавать 2 такие формы без .load() . Так jQuery отлично отрабатывал в обеих формах
Очень прошу помочь разобраться.