We Keep Coding

How to generate pdf from an html template with a React.js frontend?

I want to convert a plain HTML with basic CSS to a PDF document. I'm using React.js as my frontend framework. Ideally the conversion will be on the browser instead of the server, to not burden the server in case a lot of clients want to generate pdf documents.
The solutions I found are kind of weird to me. I expected to find a relatively simple library where you can pass a html object and returns a pdf binary data. But what I find is jsPDF that works with a canvas and it looks a bit overcomplicated to me.
It's possible to export the template html to pdf using the browser itself. However, I can't set, for example, a footer this way.
An example html could be like:
/* reset */
*
{
border: 0;
box-sizing: content-box;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: top;
}
/* content editable */
*[contenteditable] { border-radius: 0.25em; min-width: 1em; outline: 0; }
*[contenteditable] { cursor: pointer; }
*[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; }
span[contenteditable] { display: inline-block; }
/* heading */
h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }
/* table */
table { font-size: 75%; table-layout: fixed; width: 100%; }
table { border-collapse: separate; border-spacing: 2px; }
th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
th, td { border-radius: 0.25em; border-style: solid; }
th { background: #EEE; border-color: #BBB; }
td { border-color: #DDD; }
/* page */
html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }
/* header */
header { margin: 0 0 3em; }
header:after { clear: both; content: ""; display: table; }
header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
header address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; }
header address p { margin: 0 0 0.25em; }
header span, header img { display: block; float: right; }
header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
header img { max-height: 100%; max-width: 100%; }
header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }
/* article */
article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }
article address { float: left; font-size: 125%; font-weight: bold; }
/* table meta & balance */
table.meta, table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }
/* table meta */
table.meta th { width: 40%; }
table.meta td { width: 60%; }
/* table items */
table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }
table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }
/* table balance */
table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }
/* aside */
aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }
/* javascript */
.add, .cut
{
border-width: 1px;
display: block;
font-size: .8rem;
padding: 0.25em 0.5em;
float: left;
text-align: center;
width: 0.6em;
}
.add, .cut
{
background: #9AF;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
border-radius: 0.5em;
border-color: #0076A3;
color: #FFF;
cursor: pointer;
font-weight: bold;
text-shadow: 0 -1px 2px rgba(0,0,0,0.333);
}
.add { margin: -2.5em 0 0; }
.add:hover { background: #00ADEE; }
.cut { opacity: 0; position: absolute; top: 0; left: -1.5em; }
.cut { -webkit-transition: opacity 100ms ease-in; }
tr:hover .cut { opacity: 1; }
#media print {
* { -webkit-print-color-adjust: exact; }
html { background: none; padding: 0; }
body { box-shadow: none; margin: 0; }
span:empty { display: none; }
.add, .cut { display: none; }
}
#page { margin: 0; }
<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Invoice</h1>
<address contenteditable>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
</header>
<article>
<h1>Recipient</h1>
<address contenteditable>
<p>Some Company<br>c/o Some Guy</p>
</address>
<table class="meta">
<tr>
<th><span contenteditable>Invoice #</span></th>
<td><span contenteditable>101138</span></td>
</tr>
<tr>
<th><span contenteditable>Date</span></th>
<td><span contenteditable>January 1, 2012</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Due</span></th>
<td><span id="prefix" contenteditable>$</span><span>600.00</span></td>
</tr>
</table>
<table class="inventory">
<thead>
<tr>
<th><span contenteditable>Item</span></th>
<th><span contenteditable>Description</span></th>
<th><span contenteditable>Rate</span></th>
<th><span contenteditable>Quantity</span></th>
<th><span contenteditable>Price</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
<td><span contenteditable>Experience Review</span></td>
<td><span data-prefix>$</span><span contenteditable>150.00</span></td>
<td><span contenteditable>4</span></td>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</tbody>
</table>
<a class="add">+</a>
<table class="balance">
<tr>
<th><span contenteditable>Total</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Paid</span></th>
<td><span data-prefix>$</span><span contenteditable>0.00</span></td>
</tr>
<tr>
<th><span contenteditable>Balance Due</span></th>
<td><span data-prefix>$</span><span>600.00</span></td>
</tr>
</table>
</article>
<aside>
<h1><span contenteditable>Additional Notes</span></h1>
<div contenteditable>
<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
</div>
</aside>
</body>
</html>
Does anyone know a good solution for what I want? Converting a html with embedded styling to pdf? I'm willing to pay for a library, but I've to try it out first before I pay.

How to make one modal work for multiple button [duplicate]

This question already has answers here:
How to add one event listener for all buttons
(4 answers)
Closed 1 year ago.
It's working but only in one button here's my code. When i click at first button it showed up but when i click on the other buttons it doesnt show up. it seems that only at the first buttons its working. I also used the class to call the modal but it seems it also doesnt work.
<!DOCTYPE HTML>
<html>
<head>
<title>Video Records</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(wallpaper.jpg) ;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
.table-container{
padding: 0 10%;
margin: 40px auto 0;
}
.heading{
font-size: 40px;
text-align: center;
color:#FFFFFF;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
margin-bottom: 40px;
}
.table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 0 2px #FFD700;
border-radius: 6px;
}
.table thead{
background-color: #FFD700;
}
.table thead tr th{
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #000000;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #000000;
}
.table tbody tr td{
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #000000;
background-color: white;
padding: 8px;
text-align: center;
border: 1px solid #000000;
}
table tr:first-child th:first-child,
table.table tr:first-child {
border-top-left-radius: 6px;
}
table tr:first-child th:last-child,
table.table tr:first-child {
border-top-right-radius: 6px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.table tbody tr td .btn{
width: 130px;
text-decoration: none;
line-height: 35px;
background-color:#ee2828;
display: inline-block;
font-weight: medium;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 14px;
opacity: 1;
border-radius: 5px;
}
.table tbody tr td .btn:hover{
font-weight: bold;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: rgba(1, 1, 1, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.video-container .close{
position: absolute;
top:10%;
right: 25px;
font-size: 20px;
cursor: pointer;
color:white;
}
.video-container video{
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s;
}
.video-container.show{
pointer-events: all;
opacity: 1;
}
.video-container.show video{
transform: scale(1);
}
#media(max-width: 768px){
.table thead{
display: none;
}
.table, .table tbody, .table tr, .table td{
display: block;
width: 100%;
box-shadow: none;
}
.table tr{
margin-bottom: 15px;
}
.table tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
</style>
</head>
<body>
<div class="video-container" id="videoContainer">
<span class="close" id="close">✖</span>
<video src="video.mp4" controls autoplay></video>
</div>
<div class="table-container">
<h1 class="heading">Video Records</h1>
<table class="table">
<thead>
<tr>
<th>Video ID</th>
<th>File Name</th>
<th>Date</th>
<th>Time</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Video ID">0022332</td>
<td data-label="File Name">Videocapture.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022311</td>
<td data-label="File Name">Videocapture1.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022131</td>
<td data-label="File Name">Videocapture2.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0025321</td>
<td data-label="File Name">Videocapture3.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
</tbody>
</div>
<script type="text/javascript">
btn = document.getElementById("btn");
videoContainer = document.getElementById("videoContainer");
close = document.getElementById("close");
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
close.addEventListener('click',()=>{
videoContainer.classList.remove('show');
})
</script>
</body>
</html>
I think its because of my javascript so I kind of wondering if someone could help me to make it work in multiple buttons instead of one only

With getElementById you'll only get one HTML element. You should use getElementByClassName or querySelectorAll to get all the nodes that match the .class selector. And to attach event listenters to all the nodes in a NodeList object, you can use forEach.
document.querySelectorAll(".btn").forEach(btn => {
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
})
Learn more at https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

CSS Printing: Avoiding cut-in-half table between pages?

Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.
body {
opacity: 0;
}
#media print {
* {
-webkit-print-color-adjust: exact !important;
}
#font-face {
font-family: "YekanWeb";
src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
url("../fonts/YekanWeb-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#page {
margin-top: 0;
margin-bottom: 0;
padding-top: 1cm;
padding-bottom: 1cm;
}
h2.right-border {
background-color: #f3f5f7;
border-color: #42b983;
padding: 7px 10px;
border-right-width: 0.6rem;
border-right-style: solid;
margin: 1rem -15px;
}
body {
padding-top: 15px;
padding-bottom: 15px;
direction: rtl !important;
text-align: right !important;
font-family: "YekanWeb", arial, sans-serif !important;
}
.table-prices {
break-inside: avoid;
}
body {
opacity: 1 !important;
display: grid !important;
}
table {
page-break-inside: avoid;
}
table {
font-family: "YekanWeb", arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: right;
padding: 2px 8px;
font-weight: 700;
}
.table-invoice tr:nth-child(even) {
background: rgb(241 241 241 / 50%) !important;
}
.reports {
padding: 20px 10px;
font-family: "YekanWeb", "Calibri", "Adobe Arabic";
background: rgb(255, 255, 255);
}
.rep_header {
color: #555;
width: 100%;
height: 100px;
padding-bottom: 10px;
}
.container.rep_header {
border-bottom: 2px solid #333;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
margin-top: 20px;
width: 100%;
text-align: center;
}
.rep_header_logo {
margin: 0px 0px 0px 0px;
display: block;
float: right;
height: 90px;
text-align: right;
}
.rep_header_logo img {
height: 100%;
position: relative;
}
.rep_header_title {
margin: 0px 40px 0px 0px;
float: right;
display: block;
height: 100px;
text-align: right;
}
.rep_header_title h2 {
font-size: 32px;
text-align: right;
line-height: 90px;
vertical-align: middle;
}
.rep_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 150px;
text-align: right;
font-size: 13px;
}
.inv_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 140px;
text-align: right;
font-size: 12px;
}
.rep_body {
display: block;
width: 100%;
}
.rep_body_content {
display: block;
width: 100%;
}
.rep_overview {
padding: 0px;
}
.rep_description {
margin: 14px 0px 12px;
}
.paneldiv {
padding: 0px 1%;
}
.table-reports {
margin: 10px 0px 20px;
}
.table-reports tr th,
.table-reports tr td {
padding: 2px 8px;
vertical-align: top;
}
.table-reports thead tr th {
background: rgb(241 241 241 / 50%);
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tfoot tr th {
background: #eee;
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tr {
font-size: 12px;
}
.table-reports tr:nth-child(even) {
background: #efefef;
}
.rep_wait {
width: 100%;
text-align: center;
margin-top: 130px;
margin-bottom: 130px;
font-size: 40px;
color: #ccc;
}
.rep_no_result {
display: block;
width: 100%;
text-align: center;
margin: 150px 0px;
font-size: 21px;
color: #999;
}
.invoice_heading {
display: block;
width: 98%;
margin: 30px 1%;
font-size: 16px;
}
.in_info {
width: 20%;
text-align: left;
display: block;
float: left;
left: 0px;
}
.or_datetime {
margin: 15px 0px 15px 0px;
font-size: 12px;
color: #777;
font-weight: normal !important;
}
.cu_in_table {
width: 100%;
}
.cu_in_table tr td {
border: 1px solid #999;
font-size: 14px;
padding: 2px 6px;
font-weight: 700;
}
.invtablediv {
display: block;
padding: 0px !important;
}
.table-invoice {
width: 100%;
}
.table-invoice tr th {
padding: 1px 8px;
vertical-align: top;
text-align: center;
border: 1px solid #c2bfbf;
font-size: 12px;
font-weight: 700;
}
.table-invoice tr td {
font-size: 14px;
padding: 3px 8px 2px;
vertical-align: top;
text-align: right;
font-weight: 700;
border: 1px solid #cfcfcf;
}
.table-invoice thead tr th {
background: #ddd;
font-weight: 700;
font-size: 14px;
line-height: 24px;
direction: rtl !important;
text-align: right !important;
}
.table-itemreceipt thead tr th {
line-height: 16px !important;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
background: #e9e9e9;
font-weight: 700;
font-size: 11px;
line-height: 20px;
direction: rtl !important;
text-align: right;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
}
.table-invoice tr {
font-size: 10px;
}
.inv_stamp {
display: block;
padding: 0px 0px;
float: right;
width: 100%;
margin: 15px 0px;
font-size: 12px;
font-weight: 700;
}
.inv_desc {
display: block;
padding: 0px 4px;
margin: 0px 0%;
font-weight: 700;
}
.table-prices {
float: left;
max-width: 50%;
width: min-content;
}
.table-prices th {
white-space: nowrap;
}
.table-prices tr {
background: rgb(241 241 241 / 50%);
}
.inv_verify {
display: block;
padding: 0px 4px;
width: 56%;
width: 100%;
height: 120px;
margin: 10px 0%;
}
.inv_notesdiv {
display: block;
padding: 0px 4px;
float: right;
width: 98%;
margin: 20px 0%;
font-size: 10px;
}
.inv_note {
display: block;
width: 100%;
margin: 8px 0%;
}
.rep_footer {
display: block;
float: right;
width: 80%;
text-align: center;
color: #ccc;
margin-top: 30px;
}
.inv_footer {
background: #fff;
position: fixed;
bottom: 10px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #555;
line-height: 16px;
}
.invz_footer {
border-top: 2px solid #333 !important;
background: #fff;
position: fixed !important;
bottom: 4px !important;
margin-top: 60px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #777;
line-height: 16px;
}
.invz_footer .company_desc,
.invz_footer .company_contact,
.invz_footer .company_address {
display: block;
float: right;
text-align: right;
font-size: 12px;
}
.invz_footer .company_desc {
width: 40%;
}
.invz_footer .company_contact {
width: 30%;
}
.invz_footer .company_address {
width: 30%;
}
.transaction-block {
display: block;
width: 98%;
margin: 0px 1%;
font-size: 14px;
}
.tr_date table tr td {
padding-left: 4px;
}
.tr_titles {
margin-top: 10px;
}
.tr_titles table tr td {
padding-left: 4px;
}
.tr_desc_table {
width: 100%;
margin-top: 20px;
}
.tr_desc_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd;
border: 1px solid #c2bfbf;
}
.tr_desc_table tbody tr td {
padding: 4px 0;
text-align: center;
border: 1px solid #cfcfcf;
}
.narrations {
margin-top: 20px;
}
.blank_line_label {
display: inline-block;
width: 80px;
}
.blank_line {
display: inline-block;
width: 450px;
border-bottom: 2px solid #aaa;
margin: 0 10px;
}
.verification_area {
width: 100%;
display: block;
margin-top: 20px;
}
.verification_area .tr_titles {
width: 100%;
display: block;
text-align: center;
}
.verification_area .signatures {
display: inline-block;
width: 15%;
margin: 80px 4% 20px;
padding-top: 6px;
border-top: 1px solid #999;
}
.tr_cost_table {
width: 100%;
font-size: 14px;
margin-top: 20px;
}
.tr_cost_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd i !important;
}
.tr_cost_table tbody tr td {
padding: 4px 0;
text-align: center;
}
.tr_cost_table tfoot tr td {
line-height: 26px;
background: #e4e4e4 !important;
}
.bs_tr_s td {
line-height: 0.3rem !important;
}
.table-prices tr th:first-child {
text-align: left !important;
width: 192px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
<link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>
<body onload="window.print()">
<div class="container rep_header">
<header class="rep_header">
<div class="rep_header_logo"><img src="/img/default/logo.png"></div>
<div class="rep_header_title">
<h2>شرکت تجارتی شایق علیمی لمیتد</h2>
</div>
<div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
</header>
</div>
<div class="container mt-5">
<h2 class="right-border">معلومات آقر</h2>
<div class="row justify-content-between">
<table class="cu_in_table pull-left">
<thead>
<tr>
<td style="width:20%;">سریال نمبر: </td>
<td style="width:80%;">
WB-101
</td>
</tr>
</thead>
<tbody>
<tr>
<td>عنوان:</td>
<td><span class="cu_name">Ducimus do illo id</span>
</td>
</tr>
<tr>
<td>تاریخ نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
</tr>
<tr>
<td>تاریخ آفرگشایی:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس آفرگشایی: </td>
<td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
</tr>
<tr>
<td>تاریخ ختم پیشنهاد:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>شماره شناسایی آقر:</td>
<td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
</tr>
<tr>
<td>مرجع مربوطه:</td>
<td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
</tr>
<tr>
<td>تضمین آفر:</td>
<td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<h2 class="right-border">لیست محصولات</h2>
<div class="row justify-content-between">
<div class="invtablediv">
<table class="table-invoice">
<thead>
<tr>
<th style="width:4%; text-align: center !important;">#</th>
<th style="width:14%; text-align: center !important;">نام محصول</th>
<th style="width:15%; text-align: center !important;">مقدار</th>
<th style="width:10%; text-align: center !important;">فی واحد</th>
<th style="width:15%; text-align: center !important;">مجموع</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Armando Welch</td>
<td>6348</td>
<td>3</td>
<td>19044</td>
</tr>
<tr>
<td>2</td>
<td>2021 سوپر</td>
<td>109980</td>
<td>12</td>
<td>1319760</td>
</tr>
<tr>
<td>3</td>
<td>Cruz Lee</td>
<td>10235</td>
<td>30</td>
<td>307050</td>
</tr>
<tr>
<td>4</td>
<td>Armando Welch</td>
<td>36</td>
<td>2222</td>
<td>79992</td>
</tr>
</tbody>
</table>
<br>
<table class="table-prices text-right float-left">
<thead>
<tr>
<th>قیمت مجموعی اجناس :</th>
<th style="width:142px;">1725846 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">ارزش آقر :</th>
<th>614624 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تامینات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">مالیات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">انتقالات :</th>
<th>0 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">خدمات :</th>
<th>1444 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تخفیف :</th>
<th>1111222 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">قیمت نرخ دهی :</th>
<th>1725846 AFN</th>
</tr>
</thead>
</table>
<div class="inv_stamp pull-left margin-top-30" style="width:50%;">
<div class="inv_desc">
ملاحضات:<br>
<div class="inv_desc_detail">
به تعداد (4) قلم جنس برای محترم/محترمه
"ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
آفر تهیه شده است.
</div>
</div>
<div class="inv_verify margin-top-30">
مهر و امضاء:<br>
<div class="inv_desc_detail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
شرکت شایق علیمی</span>
</div>
</div>
</body>
<script>
</script>
</html>

You need to add margins to your page like this:
#page {
margin: 72px 72px 138.24px 72px;
}
and also add these style to avoid breaking your table
table {
page-break-inside: avoid;
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
table tfoot thead {
break-inside: auto;
overflow: hidden;
}

Javascript sorting html elements

I'm trying to sort html elements in JS so it looks like this,
I have it so when you hover over them, they expand with extra info but only the last one in every row gets that feature and I can't figure out why, (i've been trying for hours) if someone could help me i'd appreciate it.
i'll post it link a jsfiddle and ill post my js code here so it's eaiser to read, and all the css/html/js code with be on the jsfiddle,
https://jsfiddle.net/b7dt0xwj/
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] //'saturday', "sunday"];
var show = document.getElementsByTagName("tr");
function sortElements(){
// console.log(show)
for (var i=0; i<4; i++){
var dayHeader = document.getElementById(days[i])
var showInfo = document.getElementsByClassName("info")[1]
// console.log(showInfo)
for(var j=0; j<show.length; j++){
if (show[j].getAttribute("day") === dayHeader.getAttribute("id")){
dayHeader.parentNode.insertBefore(show[j], dayHeader.nextSibling);
console.log(show[j])
console.log(j)
dayHeader.parentNode.insertBefore(showInfo, show[j].nextSibling);
}
}
}
}

I used jQuery's .insertAfter after finding the appropriate day. However, I noticed that you rely on the next element to come directly after. So, I moved that element as well.
function sortElements(){
$(".main table tr[day]").each(function () {
var $this = $(this),
$nextEl = $this.next();
$this.insertAfter($this.parent().find("#" + $this.attr("day")));
$nextEl.insertAfter($this)
});
}
sortElements();
body {
font-family: "Roboto";
padding: 0px;
margin: 0px;
background-color: #dddcdc;
}
p {
display: inline;
}
.logo {
display: inline-block;
width: 120px;
margin-top: 10px;
margin-right: 0px;
margin-left: 75px;
font-weight: bold;
color: #ff0808;
font-size: 28px;
}
.logo a {
text-decoration: none;
color: red;
}
.logo a:hover {
color: #e20505;
}
.navbar {
background-color: #e7e6e6;
box-shadow: 1px 1px 7px #5c5c5c;
/* x, distance */
margin: 0px;
height: 52px;
}
.navbar-links {
display: inline;
}
.navbar-links p a {
margin: 0px 0px 0px 65px;
padding: 0px;
display: inline;
font-weight: bold;
text-transform: uppercase;
color: #5c5c5c;
font-size: 18px;
text-decoration: none;
}
p a:hover {
padding-bottom: 6px;
border-bottom: 2px solid #f87531;
}
div p .orange-btn {
position: relative;
bottom: 5px;
left: 230px;
border: 1px solid #f87531;
border-radius: 5px;
color: white;
margin-bottom: 5px;
font-size: 13px;
padding: 12px;
background-color: #f87531;
}
div p .orange-btn:hover {
background-color: #e06f35;
}
.main {
box-shadow: 0 4px 2px -4px #5c5c5c;
margin: 60px 66px;
background-color: #f2f2f2;
}
table {
width: 100%;
border-collapse: collapse;
border-top: none;
border-left: none;
border-right: none;
}
th,
td {
border-left: none;
border-right: none;
padding: 4px 0px;
width: 33%;
text-align: center;
font-size: 18px;
font-weight: 500;
/*border: 1px solid black;*/
}
th {
font-size: 20px;
padding: 5px;
font-weight: bolder;
}
tbody tr:hover {
background-color: #f87531;
cursor: default;
color: white;
}
.day {
width: 99%;
color: #5c5c5c;
text-align: center;
font-weight: 900;
font-size: 25px;
letter-spacing: 2px;
background-color: #dddcdc;
}
.airing {
background-color: #16c966;
}
.info {
/*display: none;*/
}
tr+tr.info {
color: #5c5c5c;
visibility: collapse;
height: 0px;
/*opacity: 0;*/
transition: height 0.3s linear, opacity 0.3s linear;
}
tr:hover+tr.info {
border: 1px solid #f87531;
height: 100px;
opacity: 1;
visibility: visible;
display: table-row;
}
.info:hover {
color: #5c5c5c;
background-color: #f2f2f2;
height: 100px;
opacity: 1px;
visibility: visible;
display: table-row;
border: 1px solid #f87531;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<table border="1">
<thead>
<tr>
<th>Show name</th>
<th>Season | Episode</th>
<th>Day of Return</th>
</tr>
</thead>
<tbody>
<tr id="monday">
<td class="day"colspan="3">
Monday
</td>
</tr>
<tr id="tuesday">
<td class="day" colspan="3">
Tuesday
</td>
</tr>
<tr id="wednesday">
<td class="day" colspan="3">
Wensday
</td>
</tr>
<tr id="thursday">
<td class="day" colspan="3">
Thursday
</td>
</tr>
<tr id="friday">
<td class="day" colspan="3">
Friday
</td>
</tr>
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr day="tuesday">
<td>arrow</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>

You are not calling the sortElement function. add the following at the bottom of your script.
sortElements();

Sequence scroll animation

In the begining I have to say I am pure newbie in coding (especially in JS and jQuery) and I have a problem that I really cannot solve since few days.
I want to create sequence animation that will be animated depending on scroll position. I found the source online with the code for that ---> THIS https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/ <-- The thing is I have a massive problem to put them togheter...
I would love to have this scrolabble animation on the right side of the page (div called "right") but whenever I am doing this, the animation is not running...
Below you can see my code.
Would be more than happy to hear from you guys with some help!
$(document).ready(function() {
$(document).mousemove(function(e) {
$('.project1').offset({
left: e.pageX + 20,
top: e.pageY + 20
});
});
$(".numero1").hover(function () {
$('.project1').css({opacity : 1.0});
},
function () {
$('.project1').css({opacity : 0.0});
}
);
});
body {
background-color:#ffffff;
font:300 Arial, sans-serif;
top:0px;
margin: 0;
padding: 0;
cursor: url('./img/dot1.ico'), auto;
overflow:hidden;
}
*{
border:none;
}
a{
text-decoration:none;
}
/* unvisited link */
a:link {
color: black;
}
/* visited link */
a:visited {
color: black;
}
a:hover{
color: black;
font-family: Arial;
font-style:italic;
}
.left a{
color: black;
font-family: Arial;
font-style: italic;
}
.left a:hover{
color: black;
font-family: Arial;
font-style: normal;
}
li {
list-style-type: none;
}
#container {
display: flex;
overflow: hidden;
height: 100vh;
padding-top: 100px;
position: fixed;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
.left,
.middle,
.right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.left::-webkit-scrollbar,
.middle::-webkit-scrollbar,
.right::-webkit-scrollbar {
display: none;
}
.left {
top: 15px;
font:300 45px Arial, sans-serif, white;
font-style: normal;
line-height: 1em;
color: white;
width: 2.7%;
margin-left: 0px;
padding-left: 15px;
margin-top: -100px;
background-color: white; /* Old browsers */
/* background: -moz-linear-gradient(top, #ffb2b2 0%, #849fff 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top, #ffb2b2 0%,#849fff 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #ffb2b2 0%,#849fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#849fff',GradientType=0 ); /* IE6-9 */
border-right: 0.5px solid black;
}
.middle {
width: 28%;
padding: 10 10 0 0;
margin-top: -110px;
margin-bottom: 100px;
background-color: white;
border-right: 0.5px solid black;
}
.projects img{
width: 100%;
}
.right {
flex: 1;
padding: 0 0 0 0;
margin-top: -100px;
margin-bottom: 100px;
font: Arial, sans-serif;
background-color: white ;
font-size: 0px;
color: black;
}
.right img{
width: 100%;
}
.gallery {
margin-top: 0px;
}
.projects {
position: relative;
margin-top: 5px;
height: 70px;
padding-bottom: 50px;
font:300 22px Arial, sans-serif;
color: black;
cursor: url('./img/dot.ico'), pointer;
border-bottom: 0.5px solid black;
}
#container figure {
background: black;
margin: 0px;
line-height: 0px;
}
#container figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#container figure:hover img {
opacity: 0;
}
table .numero1{
width: 100%;
text-align: left;
}
table .numero2{
width: 100%;
text-align: left;
}
table .numero3{
margin-top: 0px;
width: 100%;
text-align: left;
}
table .numero4{
margin-top: 0px;
width: 100%;
text-align: left;
}
.numero {
padding-right: 1%;
margin-top: -5px;
width:5%;
font-size: 33px;
/* -webkit-text-stroke: 0.5px black;*/
}
.title {
padding-left: 3%;
width: 40%;
padding-right: 1%;
}
.type {
width: 30%;
padding-left: 10%;
}
.year {
width: 5%;
padding-left: 1%;
}
.project1 {
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
opacity: 0;
height: 150px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Name</title>
<meta charset="utf-8" />
<link rel="icon" href="./img/sm.png" type="image/gif" />
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="responsiveslides.min.js"></script>
</head>
<body>
<div id="container">
<div class="left">
<a style="cursor: url('./img/dot.ico'), pointer;" href="index.html">N<br>A<br>M<br>E</a>
</div>
<div class="middle">
<div class="gallery">
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<img class="project1" src="img/project01.jpg" alt="project1">
<div class="projects">
<table class="numero1">
<td></td>
<tr><td valign="top" class="year">0</td>
<td valign="top" class="title"><a>title</a></td>
<td valign="top" class="type">what is it</td>
</tr>
</table>
</div>
<div class="right">
</div>
</div>
</body>