Request variable from forEach loop jQuery

Question

I am trying to make a multiple choice questionnaire in node. I have a forEach loop printing the form for the questions and answer fields. Problem is that I can not get the correct variable in my jQuery file where I am doing the comparison.

Using a forEach loop in an EJS and checking it in a jQuery file.

jQuery File:

$(document).ready(function(){
    $('.bcheck').click(function(){
        var on = 1;
        var ans = $(this).attr('realanswer');
        var theirAns = $("input[placeholder=Answer]").val();
        console.log(ans);
        if(ans == theirAns){
            //DO SOMETHING
        }
    });
});

The value for var theirAns = $("input[placeholder=Answer]").val(); stays the first element in the iteration. Could I use the this function to get value of something that is not an element of the item I am clicking?

HTML for the EJS file:

<% topic.questions.forEach(function(question){ %>
    <% if(question.difficulty == 10){ %>
        <form action="/lesson/<%= lesson._id %>/topic/<%= topic._id %>/course/<%= question._id %>/quest?_method=PUT" method="POST">
            <div class="quest_info questionf">
            <%= question.question %>?
                <div class="text_input">
                    <input type="hidden" name="res[_id]" value="<%= question._id %>">
                    <input type="hidden" name="realAnswer" value="<%= question.answer %>">
                    <input id="correct" type="hidden" name="res[correct]" value="<%= false %>">

                    <% if(question.question_type == "multiple"){ %>
                        <% var ran = ranNumber(0, 3) %>
                        <% var n = 0; %>
                        <% question.wrong_answers.forEach(function(wAns){ %>
                            <div class="bw btn btn-success" value="<%= wAns %>"> <%= wAns %> </div>
                            <% if(ran == n){ %>
                                <div class="ba btn btn-success "><%= question.answer %></div>
                            <% }; %>
                            <% n += 1; %>
                        <% }); %>
                        <input type="hidden" name="res[answer]" value="<%= question.answer %>" placeholder="Answer">
                    <% }else{%>
                        <input type="text"   name="res[answer]" placeholder="Answer" >
                        </input>

                        </div>
                    <% }; %>
                    <div class="text_input">
                        <div class="bcheck btn btn-primary pull-right" realanswer="<%= question.answer %>" >Check Answer</div>
                    </div>

                    <% x += 1 %>

                <div class="text_input">
                </div>
            </div>
    <% }; %>
<% }); %>

Answer 1

You're trying to use $("input[placeholder=Answer]").val() - it will return the first value indeed.

If you want to check every element matching a selector $("input[placeholder=Answer]").each() will help. Here is an example based on your code snippet.

$(document).ready(function() {
  $('.bcheck').click(function() {
    var ans = $(this).data('realanswer');

    $("input[placeholder=Answer]").each(function() {
      var theirAns = Number($(this).val());

      if (ans === theirAns) {
        console.log('Nice');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="bcheck" data-realanswer="42">check</button>

<input placeholder="Answer" type="text">
<input placeholder="Answer" type="text">
<input placeholder="Answer" type="text">