I have this list with divs and a dropdown menu. The list with divs and the dropdown menu divs have the same data attribute (data-num). When a div in the dropdown menu is clicked I want to show the div with the same data attribute and hide the others. I tried something like this but it's only giving me the first div from the list:

```
$('#chooseAnnexDropdown ul li').each(function(){
    var that = $(this);
    var sibs = $(this).siblings();
    var thisAttr = $(this).attr('data-num');
    var thisParent = $(this).parent().parent().parent().parent();

    var theProducts = thisParent.find('.theProduct');
    var theProductsAttr = $(theProducts).attr('data-num');
    console.log(theProductsAttr);

    that.click(function(){
        if ( thisAttr === theProductsAttr ) {
            // show the product div with the correct attribute and hide the others
        }
    });
});

```

So how do i loop through each element in my dropdown and then compare it to my other list and show the correct div?

Here is some of the HTML code:

```
<div id="configurator">
<!-- dropdown menu -->
<div id="chooseAnnexDropdown" class="confDropdown">
    <ul>
        <li class="block_2" data-num="block_2">Atelier</li>
        <li class="block_3" data-num="block_3">Bryggerhus</li>
        <li class="block_4" data-num="block_4">Smørebod</li>
        <li class="block_5" data-num="block_5">Bakstehus</li>
        <li class="block_6" data-num="block_6">Sportsrom</li>
        <li class="block_7" data-num="block_7">Boenhet</li>
        <li class="block_8" data-num="block_8">Ingen</li>
    </ul>
</div>  
<!-- end dropdown menu -->

{% for i in 1..39 %}
    {% for block in entry['hyttekonf'  ~i] %}
        <div class="theProduct" data-num="block_{{ i }}" id="block_{{ i }}">
            <div class="conf-image absolutecenter">
                {% set image = block.bilde.first() %}
                <img src="{{ image.getUrl('plantegningKonfigurator') }}" alt="{{ image.title }}" />
            </div>                            
        </div>
    {% endfor %}   
{% endfor %}
</div>

```