I use the following code to append a dynamic content to printing the content to an A4 paper in html.

  $('#result_body').append(

                      '<div id=result_signature'+count+' class="footer" 
                       style="position: fixed;bottom:20px; right:20px">'+
                      '<p>'+data[count].signature+'</p>'+

                      '<br>'+

                      '</div>'
                      )
                      
                      $('#result_body').append( '<div class="pagebreak"> </div>')

My problem is, when I run this, If there are two different signatures, it prints both signatures in all pages and if there is only one signature it prints only one (which is correct) in all pages. But if i set the position to relative, it prints the signatures correctly, but not to the bottom of the page. I used the fixed position as i need to print the signatures at the bottom of the every page, regardless of the content is extending to multiple pages.

Is there any way to append the signatures to the bottom of the printing pages other than using the fixed position?

(Both signatures look same for demo purpose)

When position is relative

When position is Fixed

All I want is the both signature at bottom correctly.