JavaScript and HTML button

Question

I'm working on a Django project and I'm trying to add buttons that onclick direct you to another page, on a table that is built from a model.

Here is the HTML for the table: https://i.stack.imgur.com/uzddu.png

And here is the JS function: https://i.stack.imgur.com/lLas9.png

On the site this looks like this:

https://i.stack.imgur.com/jAZ76.png

The first button where the ID is 1 when clicked takes me to the right page. The second button though is not doing anything check clicked. What I'm trying to achieve is every time an application object is created and the table is updated I want the to be able to click the button and go to a page with a url like this: /review/id wit the id being the same as the one on the table.

Answer 1

You shouldn't have multiple buttons with the same ID's, ID's should be unique. Try giving the buttons a class, and linking the onclick to these classes.

<button id="review{{ app.id }}" class="btn btn-primary reviewBtn" data-id={{app.id}}">Review</button>

var reviews = document.getElementsByClassName("reviewBtn");
var redirect = function() {
    @TODO
};


for (var i = 0; i < reviews.length; i++) {
    reviews[i].addEventListener('click', redirect, false);
}

see this demo