if tag not checking all classes and just finishes with checking the first one

so the problem is i have some divs with same class but different id like this and i have another .icon class that i want to compare the id with the ids of the box classes:

<div class="box" id="first" data-marker="first">

</div>

<div class="box" id="second" data-marker="second">

</div>

<div class="box" id="third" data-marker="third">

</div>

<div class="icon" id="first">

</div>

<div class="icon" id="second">

</div> 

and i wrote a jQuery like this

    if($(this).attr("id") == $(".box").attr("data-marker")){
        value= $(this).attr("id");
        console.log("#" + value);
        $("#" + value ).addClass('active');
    }else{

    }
});

the problem is the if tag only checks the first box class for example if u click on icon class with the id of "second" it does not check other box and it only checks the box with the id of #first or better to say the first box, and thats all