JSFiddle - React, Tailwind, and code Playground

CSS

.full-detail-box{width:200px; display:none; height:100px;}

JavaScript

// Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery

         // DOM Ready
for(var i=0;i<3;i++){
    $('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('.btn-pro').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();
                
                var id=$(this).data('id');

                // Triggering bPopup when click event is fired
                $('#'+id).bPopup();

            });




/*================================================================================
 * @name: bPopup - if you can't get it up, use bPopup
 * @author: (c)Bjoern Klinggaard (twitter@bklinggaard)
 * @demo: http://dinbror.dk/bpopup
 * @version: 0.9.4.min
 ================================================================================*/
 (function(b){b.fn.bPopup=function(z,F){function K(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var h=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");h.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();h.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":A();b("<img />").load(function(){k(a.loadCallback);G(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:A(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal...