<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

<style>
input {
    padding: 10px;
    border: #a5d2ca 1px solid;
    border-radius: 4px;
    background-color: #FFF;
    width: 230px;
    margin-top: 5px;
    box-sizing: border-box;
}
button {
    background-color: rgb(255, 87, 51);
    padding: 10px 40px;
    color: #FFF;
    border: #739690 1px solid;
    border-radius: 4px;
    cursor: pointer;
}
#container{
display:block;
width:500px;
height:180px;
margin-bottom:12px;
padding:15px;
border:2px dotted orange;
}
.copied{
position:absolute;
left:423px;
width:100px;
height:40px;
text-align:center;
line-height:40px;
background:#4C7D4C;
border-radius:5px;
color:white;
display:none;
}

</style>	

<script>
$( document ).ready(function() {
    console.log( "ready!" );
	new Clipboard('.btn');
	
	$("button").on("click", function(){
      $('.copied').show();
	  $('.copied').fadeOut(2000);
    });
});	
	
	
</script>	
<div class="copied"> Copied!!! </div>



<div id="container">
<h1> 3. Copy text from the div tag </h1>
<label> Product Number : </label>
<div style="font-size: 22px;" id="example3"> 12743-64833-383993-646383 </div>
<button class="btn" data-clipboard-target="#example3"> Copy to clipboard </button>
</div>