django - Using jQuery collapse dynamically -

here html part.products list displayed in pannel:

{% product in pro %}     <div class="container">         <div class="row">             <div class="col-sm-4">                 <div class="panel panel-primary">                     <div class="panel-heading">                         {{ product.item_name }}<br>                         {{ product.item_price }}                         <div>{{ product.item_time_end }}</div>                     </div>                     <div class="panel-body">                         <img src="{{ product.item_image.url }}" class="img-rounded" alt="cinque terre" width="304" height="236">                     </div>                     <div class="panel-footer">                         <button type="button" class="btn btn-success" id="mybtn">                             submit                             <div class="collapse">                             ...                             </div>                         </button> 

jquery:

$(document).ready(function(){     $("#mybtn").click(function(){         $(".collapse").collapse('show');     }); }); 

the thing while template renders, items list pannels collapse @ once. how collapse individual items when clicked in particular items? thing button id same loop.

use $(this).next() find next sibling, .collapse:

$(".mybtn").click(function(){     $(this).next().collapse('show'); // work if .collapse next sibling }); 

or use .siblings():

$(".mybtn").click(function(){     $(this).siblings('.collapse').collapse('show'); // work if .collapse 1 of siblings }); 

or use .parent() go 1 level, , search .collapse if it's not next sibling:

$(".mybtn").click(function(){     $(this).parent().find('.collapse').collapse('show'); }); 

in addition note use .mybtn, since #mybtn should unique:

<button type="button" class="btn btn-success mybtn">