Javascript-编辑具有特定Id的第一个空输入

我正在为我的站点创建一个表单，我想创建一些类似于自定义属性“required”的东西。我有一些Id为“必需”的输入。比如：

<input type="text" id="required">
<input type="text" id="required">
<input type="text" id="required">

Javascript:

$('#check').click(function() {
    var x = $("input[id=required]").filter(function() {
        return $(this).val().trim() == '';
    });

    $(x).each(function (index) {
        $(this).val('');
        $(this).addClass("input-error");
        $(this).attr({
          "data-toggle": "popover",
          "data-container": "body",
          "data-content": "Wypełnij to pole",
          "data-trigger": "manual"
        });
        $(this).popover('show');  
        $(this).keypress(function() {
            $(this).removeClass("input-error");
            $(this).popover('destroy'); 
        });
    });

    if(x.length > 0) {
        $('html, body').animate({
            scrollTop: $(x[0]).offset().top-100
        }, 200);
    }

});

JSFIDLE

---

HTML俱乐部的第一条规则，永远不要重复id。使用类而不是id对元素进行分组

$('#check').click(function() {
    var x = $("input[id=required]").filter(function() {
        return $(this).val().trim() == '';
    });

    $(x).each(function (index) {
        $(this).val('');
        $(this).addClass("input-error");
        $(this).attr({
          "data-toggle": "popover",
          "data-container": "body",
          "data-content": "Wypełnij to pole",
          "data-trigger": "manual"
        });
        $(this).popover('show');  
        $(this).keypress(function() {
            $(this).removeClass("input-error");
            $(this).popover('destroy'); 
        });
    });

    if(x.length > 0) {
        $('html, body').animate({
            scrollTop: $(x[0]).offset().top-100
        }, 200);
    }

});