jquery + bootstrap 2.3.2 popover not working with $(this).next

Question

I've got a table with checkboxes. When the checkbox is checked there should be an twitter bootstrap popover with a form in it. This form is dependent to its checkbox. therefore i will render hidden forms and show them in an twitter popover.

But when I try to access the popover content with $(this).next(".my_class").html(); it's not working. When I render fixed content with return $("#my_id").html();

Here is an example (here as jsfiddle):

My html tables

<h4 class="hide">fixed form</h4>

<div id="popover-head" class="popover-head hide">fixed form</div>
<div id="popover-content" class="popover-content hide">
    <form>
        <!-- my form -->
    </form>
</div>

<h4>table one working popover</h4>

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>
                <input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
            </td>
        </tr>
    </tbody>
</table>

<h4>table two not working popover</h4>

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            </td>
            <div id="popover-head" class="popover-head hide">dynamic form 1</div>
            <div id="popover-content" class="popover-content hide">
                <form>
                    <!-- my form -->
                </form>
            </div>
        </tr>
        <tr>
            <td>
                <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            </td>
            <div id="popover-head" class="popover-head hide">dynamic form 2</div>
            <div id="popover-content" class="popover-content hide">
                <form>
                    <!-- my form -->
                </form>
            </div>
        </tr>
    </tbody>
</table>

My javascript:

//working
$('.checkbox_cancel').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
 });

//not working
$('.checkbox_cancel2').popover({ 
    html : true,
    title: function() {
      return $(this).next(".popover-head").html();
    },
    content: function() {
      return $(this).next(".popover-content").html();
    }
});

How could I get this to work with dynamic selection?

Answer 1

Looks like your code should work but your html isn't correct (next is the next element) the following should work:

 <tr>
        <td>
            <input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
            <div id="popover-head" class="popover-head hide">dynamic form 1</div>
            <div id="popover-content" class="popover-content hide">
              <form>
                <!-- my form -->
              </form>
            </div>
        </td>