自己を繰り返すDOM要素（この場合はフォーム）にJavaScriptを適用する方法

Question

フォームをターゲットにするためにJavaScriptを作成しましたが、その要素はpageのようなページに2回表示されるまで問題ありません。このようなページでは、JavaScriptコードは最初のフォームでのみ動作します。私もループを試みましたが...？だから、私を助けて...以下のコードがある...

HTML

<div class="row"> 
<div class="small-12 columns" id="subscribe_form"> 
    <span class="errors" id="subscriber_names_error"></span> 
    <input type="text" id="subscriber_names" placeholder="your names if you wish..."/> 
    <span class="errors" id="subscriber_email_error"></span> 
    <input type="email" id="subscriber_email" placeholder="your e-mail please!"/> 
    <span class="errors" id="subscribe_btn_error"></span> 
    <input type="submit" id="subscribe_btn" value="SUBSCRIBE" class="submit_btn"> 
</div> 

はJavaScript

var subscriber_names = ""; 
var subscriber_email = ""; 

$("#subscriber_names").keyup(function(){ 
var val = $(this).val(); 
if(val == ""){ 
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your names please.</p>"); 
    subscriber_names = ""; 
} else if(val.length < 5){ 
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Names to short.</p>"); 
    subscriber_names = ""; 
} else { 
    $("#subscriber_names_error").html(""); 
    subscriber_names = val; 
} 
}); 

$("#subscriber_email").keyup(function(){ 
var val = $(this).val(); 
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

if(val == ""){ 
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your e-mail please.</p>"); 
    subscriber_email = ""; 
} else if(re.test(val)){ 
    $("#subscriber_email_error").html(""); 
    subscriber_email = val; 
} else { 
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Invalid E-mail.</p>"); 
    subscriber_email = ""; 
} 
}); 

$("#subscribe_btn").click(function(){ 

var subscribe_form_div = $("#subscribe_form"); 

if(subscriber_names != "" && subscriber_email != ""){ 
    $.ajax({ 
     type: 'POST', 
     url: 'ajax.php', 
     data: 'subscriber_email='+subscriber_email+'&subscriber_names='+subscriber_names, 
     success: function(message){ 
      subscribe_form_div.html("<img src='imgs/loading_two.gif' />"); 
      $("#subscribe_form").html(message); 
     } 
    }); 
} else { 
    $("#subscribe_btn_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in correctly please.</p>"); 
    subscriber_email = "" 
} 
}); 

注：電子メールの検証のための正規表現があるからhere

Answer 1

同じページに同じIDを持つ2つのitensを持つことは推奨できません。何が要素をユニークにするのか、同じフォームを2回ページ内に置くと、フォームIDとフィールドの同じクラス名を使用して作業し、フォームを検証用の参照として使用できます。

私はあなたの質問にお答えしたいと思います。