Question

i have a few equal buttons and containers;

Something like:

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

<div>
   <button class="myCoolButton">
       btn1
   </button>
</div>

<div class="myCoolContainer">
   container
</div>

So when user clicks on button i need to show some info in to container below. But how i can understand what container i need to use? Is it good to put attribute with bindend container to button? What is best practice?

jsfiddle

NOTE: calendar must be showed in yellow rectangle

Answer 1

$('buttonselector').click(function(){ 
      $(this) // get clicked button
      .parent() // parent of clicked buton, i.e div at odd place
       .next() // next div to parent div of clicked button, i.e, div at even place
        .html('set some value') // set value to adjacent div
})

EDIT

<div>
   <button id="btn1">
       btn1
   </button>
</div>

<div id="Container_btn1">
   container
</div>

$('#btn1').click(function(){ 
        var name= $(this).attr('id'); 
        $("#container_"+ name).html('set some value')
});