JSFiddle - React, Tailwind, and code Playground

by Joe Cisneros

HTML

<div>
  This should NOT be printed!
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div style="display:none">
NEVER SHOW THIS
</div>
<div id="printThis" class="printMe">
    This should BE printed!
    <div class="modifyMe">old</div>
</div>

<div class="printMe">
    This should BE printed as well!
</div>

JavaScript

jQuery.fn.extend({
	print: function() {
		var cloned = $(this).clone(),
    		$printSection = $('<div id="printSection">').append(cloned),
        $toggleBody = $('body *:visible').hide();

    $('body').append($printSection);
    
    /* $('#printSection, #printSection *').show() */;
    $printSection.show();
    window.print();
    $printSection.remove();
    $toggleBody.show();
	}
});

$(document).ready(function(){
	$(document).on('click', '#btnPrint', function(){
  	$('.printMe').print();
  });
});