Accessing an element in django for loop

Question

I have a Django template with the following code which creates multiple buttons and tries to delete/hide one of them on a click (on the same button):

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

where helicopters is a list of strings, and later in the script block I have

function my_func(h) {
    document.getElementById('remove-heli').style.visibility = 'hidden';
    }

The function runs, but as you may expect, it runs only on the first element of my for loop, because all the <\div> elements in the for loop have the same id.

My question is: is there a way to point to the particular element? or alternatively, is there a better way to print buttons next to each other?

Answer 1

How about set different ids for the div elements?

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli-{{ h }}">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

Then, you can access the specific div element with the id.

function my_func(h) {
    document.getElementById('remove-heli-' + h).style.visibility = 'hidden';
}

NOTE

Using same ID for several elements is not a good idea. Use unique id.

UPDATE

Alternatively, you can use forloop.counter:

{% for h in helicopters %}
    <div class="btn-group" id="remove-heli-{{ forloop.counter }}">
        <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'>
            {{ h }}
        </button>
    </div>
{% endfor %}

Answer 2

This could actually be accomplished more simply by passing this to my_func, eg:

onclick='my_func(this);'

The this variable contains the DOM element which triggered the event, so it would be whatever button was clicked.

function my_func(this) {
    this.style.visibility = 'hidden';
}

But this of course only works when you want the button to hide itself. If you want it to hide something else, then using different id's is the way...

If you are still confused about the whole "what runs where" thing.. just do a View Page Source on the browser and you'll see exactly what your template generated. Everything else happens in the browser. The browser developer tools are your friend here.. open them up so you can see any errors you are getting etc. If you want to do this stuff you need to get into using the developer part of the browser, you will go insane otherwise.