JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://500milligrammes.com/facticemagazine/final/0/jquery.zclip.js"></script>
<script src="http://500milligrammes.com/facticemagazine/final/0/jquery.cbpFWSlider.min.js"></script>
<div class="flip1">Click to slide the first panel down or up</div>
<div class="panel1">

when this panel is open, any copy link works !!!

</div>










<div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
<div class="panel2">
when a copy link is inside a panel, it doesn't work !!!
<br/><br/>

<span id="copy-callbacks">Copy link&nbsp;&nbsp;<img  src="http://500milligrammes.com/facticemagazine/final/addon/share/check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>

</div>












<div style="margin-top:150px; ">
This one works perfectly when all panels are closed !!
<br/>
<span id="copy-callbacks2">Copy link&nbsp;&nbsp;<img  src="http://500milligrammes.com/facticemagazine/final/addon/share/check.png" id="check2" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
</div>

CSS

.panel1, .panel2 { display: none;  border:1px solid #ccc; background-color:#eee}
.flip1, .flip2  { border:1px solid #ccc; background-color:#eee}

#check, #check2  { visibility: hidden; width:12px; height:12px;}
span#copy-callbacks, span#copy-callbacks2 { float: none; cursor:pointer;}


.zclip{
    
    border:1px solid red;
    position:relative;
    z-index:-1000!important;
}

JavaScript

$(document).ready(function(){
$("span#copy-callbacks").zclip({
path:"http://500milligrammes.com/facticemagazine/final/addon/share/ZeroClipboard.swf",
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#copy-callbacks').css('background','none');
},
afterCopy:function(){
$('#copy-callbacks').css('background','none');
}
});

document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});


$(document).ready(function() {
$('span#copy-callbacks').hover(
function () {
$(this).css({"color":"#e0ccb4"});
}, 
				
function () {
$(this).css({"color":"#000"});
}
);







$("span#copy-callbacks2").zclip({
path:"ZeroClipboard.swf",
copy:$('#callback-paragraph2').text(),
beforeCopy:function(){
$('#copy-callbacks2').css('background','none');
},
afterCopy:function(){
$('#copy-callbacks2').css('background','none');
}
});

document.getElementById("copy-callbacks2").onclick = function() {
document.getElementById("check2").style.visibility = "visible";
}
});


$(document).ready(function() {
$('span#copy-callbacks2').hover(
function () {
$(this).css({"color":"#e0ccb4"});
}, 
				
function () {
$(this).css({"color":"#000"});
}
);






$(".flip1").click(function(){
$(".panel1").slideToggle("fast");
});

$(".flip2").click(function(){
$(".panel2").slideToggle("fast");
});
});