Many button->container elements

i have a few equal buttons and containers;

Something like:

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

<d开发者_开发知识库iv 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

---

$('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')
}); 

---

Try this.

$(".myCoolButton").click(function(){
    $(this).closest("div").next().html("triggered");
});

---

$('.myCoolButton').click(function(){

      $(this).parent().next('div').html('hello world');
});

http://jsfiddle.net/NNpvZ/

---

may be you can try this, http://jsfiddle.net/konglie/zpVWY/

    $('button.myCoolButton').click(function(){
    var container = $(this).parent().next('div.myCoolContainer')[0];
    $(container).html('clicking on ' + $(this).text());
});

---

If you want to place buttons all over the page and corresponding containers all over the page, then it would be very hard to find the right container without extending your structure. Did you consider adding a new class that matches container with the button? in that case no matter where you would have it, you would be sure which container you want to refer to. For example you could add class button1 for button and container1 for container (instead of ID's there might be any common pattern).

---

var myCoolButtons = $('.myCoolButton');
var myCoolContainers = $('.myCoolContainer');
myCoolButtons.click(function() {
    var index = $(this).index(myCoolButtons);
    myCoolContainers.eq(index).html('CoolButton right before me is clicked');
});