HTML Dynamic Popup box

Question

In my jsp I have a for each loop (spring mvc)

<c:forEach items="${ce}" var="contractEntitlement">
    <c:if test="${contractHeader.id ==  contractEntitlement.chId}" >
        <tr>
            TD's to show each fields ....
            <td>
                <div class="center">
                    <a href="/view/viewcontract/update/ce/${contractEntitlement.id}" id="id-btn-dialog2" class="btn btn-info btn-sm">Confirm Dialog</a>
                </div>
                <div id="dialog-confirm" class="hide">
                    <div class="alert alert-info bigger-110">
                        These items will be permanently deleted and cannot be recovered.
                    </div>

                    <div class="space-6"></div>

                    <p class="bigger-110 bolder center grey">
                        Are you sure?
                    </p>
                </div><!-- #dialog-confirm -->
            </td>
        </tr>
    </c:if>
</c:forEach>

Each record will have a button for deletion. My jquery is:

$( "#id-btn-dialog2" ).on('click', function(e) {
    e.preventDefault();
    var href = ($(this).attr('href'));
    alert(href);

    $( "#dialog-confirm" ).removeClass('hide').dialog({
        resizable: false,
        width: '320',
        modal: true,
        buttons: [
            {
                "class" : "btn btn-danger btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                    window.location = href;
                }
            }
            ,
            {
                "class" : "btn btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
}); 

This works only for the 1st record but when I click the rest it just redirects to page w/o passing jquery. I tried changing based on this stackoverflow question:

Passing data to a jQuery UI Dialog

$( 'a[href*="/view/viewcontract/update/ce/${contractEntitlement.id}"]' ).on('click', function(e) {

But with this, even the 1st record does not pass in the jquery anymore. Any idea how to make my jquery more dynamic?

Answer 1

As mentioned, need unique id's in order for this to work. On jquery when DOM is ready:

var i=0;
$('.testing').each(function(){     // testing is the class name
    i++;
    var newID='id-btn-dialog2'+i;  // increment the id +1 (unique)
    $(this).attr('id',newID);      // Assign the new id
    $(this).val(i);
});

Now that we have unique id's. Need to get the id of the button clicked and popup message box. In jquery :

$('a.testing').on('click', function(e) { 
    var id = $(this).attr('id');
    var href = $(this).attr('href');
    alert(href);
    e.preventDefault();

    $( "#dialog-confirm" ).removeClass('hide').dialog({
        resizable: false,
        width: '320',
        modal: true,
        buttons: [
            {
                "class" : "btn btn-danger btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                    window.location = href;
                }
            }
            ,
            {
                "class" : "btn btn-minier",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

}); 

This one worked and able to fix my issue. jsp above is the same except:

<a href="/view/viewcontract/update/ce/${contractEntitlement.id}" id="id-btn-dialog2" class="btn btn-info btn-sm testing">Confirm Dialog</a>

adding in class "testing".