Проверка динамически добавленных полей выбора с использованием JQuery (ASP. NET WebForms с MasterPage)

Question

У меня есть ASP. NET WebForm, в котором есть группа тегов выбора с возможностью добавления дополнительных (динамически).

Мой вопрос: как мне проверить этот тип формы? Моей первой попыткой было создать код JQuery, который отключает кнопку, которая передает данные, до тех пор, пока не будут заполнены все раскрывающиеся поля. Проблема в том, что код, который я использую, похоже, не запускает функцию, которая позволяет кнопка.

Здесь приведен код для веб-формы, этот заполнитель содержимого находится внутри тега Form на главной странице:

    <asp:Content ID="PageContentBody" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
            <div class="container mt-3 bg-white form-group fieldGroup">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> +</a>
            </div>
        </div>
    </div>

        <asp:Button ID="Button1"  ClientIDMode="Static" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="Button1_Click" />
</asp:Content>

Вот часть кода, которую я использую для динамически генерировать поля, в основном это скрытый div. Мой JQuery «копирует» это для создания новой строки полей в форме и, возможно, источника проблемы:

<asp:Content ContentPlaceHolderID="BodyScripts" runat="server">
       <!-- copy of input fields group -->
    <div class="container mt-3 bg-white form-group fieldGroupCopy" style="display: none;">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> -</a>
            </div>
        </div>
    </div>

Вот код, который я использую для копирования / создать дополнительные поля выбора, а также, возможно, еще один источник моей проблемы, поэтому я помещаю это здесь:

 $(document).ready(function(){
        //group add limit
        var maxGroup = 10;
        var ctr = 0

        //add more fields group
        $(".addMore").click(function(){
            if($('body').find('.fieldGroup').length < maxGroup){
                var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                $('body').find('.fieldGroup:last').after(fieldHTML);
            }else{
                alert('Maximum '+maxGroup+' groups are allowed.');
            }
        });

        //remove fields group
        $("body").on("click",".remove",function(){ 
            $(this).parents(".fieldGroup").remove();
        });
    });

И, наконец, метод проверки, который я использую. Это отключает кнопку ЕСЛИ каждый тег выбора на странице имеет значение 0. В противном случае, если каждый тег выбора имеет значение, отличное от 0, включите кнопку:

        function buttonState(){
    $("select").each(function(){
        $('#Button1').attr('disabled', 'disabled');
        if($(this).val() == "0" ) return false;
        $('#Button1').attr('disabled', '');
    })
}

$(function(){
    $('#Button1').attr('disabled', 'disabled');
    $('select').change(buttonState);
})

Что я делаю неправильно? Есть ли лучший подход для этого?