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">&nbsp; Добавить</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 отлично отрабатывал в обеих формах

Очень прошу помочь разобраться.


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