JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page">Grey color div's <strong>NO NEED</strong> to be printed on printer.<br>
The current piece of code it is working but not as expected because it takes the whole page ignoring all the content except required div but in this case the label sent to the printer has a lot of blank space
<div id="menu">
<a href="#"><i class="fa fa-edit"></i></a> <!-- edit -->
<a href="#"><i class="fa fa-trash"></i></a><!-- delete -->
<a id="show-hide" href="#" rel="nofollow" onclick="return false"><i class="fa fa-qrcode"></i></a><!-- show/hide qrcode -->
<a id="doPrint" href="#" rel="nofollow" ><i class="fa fa-print"></i></a><!-- send the div "myId" to printer -->

</div>
<div id="myId">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/220px-QR_code_for_mobile_English_Wikipedia.svg.png" alt="qrcode" height="100" width="100">
<li>All the contents of this div should be printed on my label printer at the div size or to fit paper size for example 62x62mm</li>
<li>clicking on qrcode show/hide that div</li>
<li>the content is generated by php code</li>
<li>the print option should work also on mobile browsers</li>
                
</div>

<div id="something">another grey div NO NEED to be printed</div>
<div id="footer">this div also NO NEED to be printed</div>

CSS

#page{
  background-color:#808080;
  font-size:18px;
}
#menu {
  font-size:50px;
  background-color:#808080;
}
#myId{
  background-color:#ffffff;
  border:4px solid #000000;
  font-size:16px;
}
#something{
  background-color:#808080;
}
#footer{
  background-color:#808080;
}

JavaScript

//show hide div for label printing

$(document).ready(function(){
   	$("#show-hide").click(function(){
    $("#myId").toggle();
   			 });
				});
     
//start print div for label printing
  
  function printDiv(myId){
var HiddenElements = document.querySelectorAll( 'body *' ); // get all the elements in the body
    var VisibleElements = document.querySelectorAll( '#' + myId + ' *' ); // gets the elements inside the div to be printed

    var index = 0, length = HiddenElements.length;
    for (  ; index < length; index++) {
        HiddenElements[index].style.visibility = "hidden"; // hide all the elements in the body             
    }   

    index = 0;
    length = VisibleElements.length;
    
    for (  ; index < length; index++) {
        VisibleElements[index].style.visibility = "visible"; // show all the elements inside the div to be printed      
    }

    // display the element to be printed

    myElement = document.getElementById(myId);
    myElement.style.visibility = "visible"
    
    var oldPos = myElement.style.position;
    myElement.style.position = "absolute";
    
    myElement.style.left = 0;
    myElement.style.top = 0;

    setTimeout(window.print, 1000); // Wait a bit for the DOM then Print ( Safari :/ )

    // wait for the data to be sent to the printer then display the previous content
    setTimeout(function(){    
    
        index = 0;
        length = HiddenElements.length;
        
        for (  ; index < length; index++) {
            HiddenElements[index].style.visibility = "visible";             
        }   
        
        myElement.style.position = oldPos;
    }, 5000);

}

document.getElementById('doPrint').addEventListener('click', function(){
	printDiv('myId');
});