Trying to generate a single receipt with break/cut the paper in between and to generate 2 copies, one for customer and another for merchant i.e (to have 2 different slips).
Took reference from https://parzibyte.me/blog/en/2019/10/10/print-receipt-thermal-printer-javascript-css-html/
Tried to apply page break as below but while printing via web application seeing no breaks/cut in the printed receipt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Receipt example</title>
</head>
<body>
<header>
<h1>HEADER</h1>
</header>
<div style="page-break-after:always"></div>
<section id="content">
<h1>CONTENT</h1>
</section>
<div style="page-break-after:always"></div>
<footer>
<h1>FOTTER</h1>
</footer>
<button id="btnPrint" class="hidden-print">Print</button>
<script>
const $btnPrint = document.querySelector("#btnPrint");
$btnPrint.addEventListener("click", () => {
window.print();
});
</script>
</body>
</html>