How can I combine all elements of a div into a static image before printing?

I’ve inherited a project so there’s a lot of javascript and jquery going on that I don’t understand the original intent, so please bear with me with any followup questions.

I have a tool where you can replace the image on a card with any other image you want (via cropper). Once everything is sized and positioned as you see fit, upon clicking print, all elements shift back to whatever things look like without custom styles. Here’s what the original developer had to accomplish this:

    var frontPosition, backPosition;

    window.onbeforeprint = function(event){
      
      frontPosition = $(initial_image_front).position();
      backPosition = $(initial_image_back).position();

      if ( frontPosition.top > 0 ) {
        $(initial_image_front).css({ top: frontPosition.top * 0.470588235 });
      }
      if ( frontPosition.top < 0 ) {
        $(initial_image_front).css({ top: (-Math.abs(frontPosition.top) * 0.366863905) });
      }
      if ( frontPosition.left !== 0 ) {
        $(initial_image_front).css({ left: 0 });
      }

      if ( backPosition.top > 0 ) {
        $(initial_image_back).css({ top: backPosition.top * 0.470588235 });
      }
      if ( backPosition.top < 0 ) {
        $(initial_image_back).css({ top: (-Math.abs(backPosition.top) * 0.366863905) });
      }
      if ( backPosition.left !== 0 ) {
        $(initial_image_back).css({ left: backPosition.left * 0.59 });
      }

    };

    window.onafterprint = function(event){
      
      $(initial_image_front).css({ top: frontPosition.top, left: frontPosition.left });
      $(initial_image_back).css({ top: backPosition.top, left: backPosition.left });

    };

And here is the corresponding html:

<div>
  <div class="flex justify-center mb-2 print-hidden">
    <p class="font-head text-white opacity-50">FRONT</p>
  </div>
  <div class="card front flex flex-col mx-auto" style="width: 575px; height: 408px;">
    <%= render 'card_head' %>
    <div class="flex w-7/12 pl-4 pt-3 pb-6 print:pl-2 print:pt-0 print:pb-3 flex-grow flex-wrap items-center justify-center">
      <%# other stuff %>
    </div>
    <%= image_tag "laurie.png", style: "left: 267px; top: 0;", class: "card__image absolute z-0", id: "initial_image_front" %>
  </div>
  <div class="flex justify-between mb-2 mt-2 print-hidden">
    <%# other stuff %>
    <%= form_for(Card.new, remote: true, url: save_photo_path) do |f| %>
      <label>
        <p class="font-head text-white opacity-80 hover:opacity-100 hover:text-red cursor-pointer" id="change_front">Change Photo</p>
        <%= f.file_field :photo, class: "hidden input_front" %>
      </label>
      <div class="hidden">
        <%= f.submit %>
      </div>
    <% end %>
  </div>
</div>

And here’s the before and after:

What I’m assuming is happening is all the divs are being organized on top of one another but I want to keep the styles that we had before submitting the form. I’d like to just nix all the window.onbeforeprint and window.onafterprint but I still get the same result, which is why I think the original developer made this mess lol. Is there a simpler way to achieve printing my image than adjusting all the css after it’s already been adjusted??

It’s using tailwind, but obviously there are a lot of styles that seem to be overkill, both inline and in an imported stylesheet. I’ll address that some other time, unless it’s super important in regards to resolving my issue.