JsPdf only get one png image element instead of all element

So i kinda confused to use jsPdf and Html2canvas. I have some page like this, https://i.stack.imgur.com/gspxL.png[1] And i need to download whole element on the page except the video. Its already work but instead of printing the whole element, it only takes the face cropped images part like this [https://i.stack.imgur.com/u10vS.png]

I use jspdf with html2canvas. And here is the code for the pages

<div class="container">
<a class="nav-link" href="{%url 'kepalsuan:home'%}">
    <div class="logo text-center mt-1 mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo"></div>
</a>
<hr />
<div class="result text-center">
    <div id="printedPart">
        <!-- <h3>Play to see the Result!</h3> -->
        <h2>It Takes <span style="font-size:40px;font-weight:600;">{{ duration }}</span> seconds to detect It!</h2>
        <div class="hasilakhir mt-3">
            {%if output == "REAL" %}
            <img src="{% static 'images/realstamp.png'%}" alt="real" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="realaccuracy" style="color:green; float:right; padding-right:400px; padding-top:20px;">{{ confidence }} %</h1>
            {%else%}
            <img src="{% static 'images/fakestamp.png'%}" alt="fake" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="fakeaccuracy" style="color:red; float:right;padding-right:400px;padding-top:20px;">{{ confidence }} %</h1>
            {%endif%}
        </div>
        <hr>
        <!-- <h1 class="mx-auto mt-5" style="font-weight:900;">Result</h1> -->
        <h3 style="margin-top:125px;">Face Cropped Frames</h3>
        <div id="faces_images" class="col-12 mb-2">
            {% for each_image in faces_cropped_images %}
            <img src="{%static each_image%}" class="faces" width="auto" height="150" /> {%endfor%}
        </div>
    </div>
    <video height="320" width="640" id="predict-media" controls>
  <source src="{{MEDIA_URL}}{{original_video}}" type="video/mp4" codecs="avc1.4d002a" />
    </video>
</div>
<div class="text-center">
    <a class="btn btn-warning mt-5 btn-lg" href="javascript:downloadResult()" style="color:white;font-weight: 700;">Download Result!</a>
</div>

And this is the code for pdf function

var div = document.querySelector("#printedPart")

function downloadResult() {
    var imgData;
    html2canvas($("#printedPart"), {
        useCORS: true,
        onrendered: function(canvas) {
            imgData = canvas.toDataURL('image/png');
            var doc = new jsPDF('l', 'px', 'a4');
            doc.addImage(imgData, 'png', 10, 200);
            doc.save('kepalsuan_reports.pdf');
        }
    });
};

Can somebody help me to make it? I need to show it for my final test on college next week, thank you very much.