Question

I have this code creating an array using the element names, but instead of showing just once it shows the array 4 times. What am I doing wrong now?

HTML

<ul>
    <li><a draggable="true" href="#" id="one" name="uno" class="imgHvr">One</a></li>
    <li><a draggable="true" href="#" id="two" name="dos" class="imgHvr">2</a></li>
    <li><a draggable="true" href="#" id="three" name="tres" class="imgHvr">three</a></li>
    <li><a draggable="true" href="#" id="four" name="sweet" class="imgHvr">4</a></li>
</ul>

jQuery

$("#subBtn").click(function() {
    var answers = []
    $('#bin a').each(function() {
        answers.push($(this).attr('name'));
        console.log(answers);
    })
});

I have posted the complete code here Demo

Answer 1

In answer form:

$("#subBtn").click(function() {
    var answers = []
    $('#bin a').each(function() {
        answers.push($(this).attr('name'));
    })
    console.log(answers);
});