How to display a particular div in jquery?

I have written some code for displaying a particular div in html. The code is shown below :

<div id="pdfdiv_1">
<section class="report">
<div class="top-box"></div>
<div class="row"> 
<div class="col-md-12 text-center">
    <img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
width: auto;">
</div>
<div class="col-md-5">
    <div class="info-wrapper">
        <?php if(!empty($user_details->st_profile)){ ?>
          <img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>"  style="width: 22%;">
          <?php } else {?>
        <img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
        <?php } ?>

       <div class="info-wrap-inner">
           <p><span>Name </span> : <?php echo $user_details->st_name;?></p>
           <p><span>Age </span>  : <?php echo $age;?></p>
           <p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
           <p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
           <p><span>Email </span> : <?php echo $user_details->st_email;?></p>
           <p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
      </div>
    </div>
    </div>
    <div class="col-md-7 report-wrapper">
        <h1 class="heading">SKILL FINDER TEST REPORT</h1>
        <p><?php echo $test_details->description;?></p>
    </div>


 </div>
 </div>

 </section>
 <section class="skills">
        <div class="container">
             <div class="row"> 
                <div class="col-md-12">
                    <h1><span>IDENTIFY SKILLS BASED ON YOUR INTERESTS</span></h1>
                </div>
            </div>

         <div class="row"> 
         <?php echo $test_details->description3;?>
          
        </div> 
      </section>


      </div><!-- pdfdiv close -->

I have written a code for displaying the div pdfdiv_1 in jquery as shown below :

<script>
function  pdfP(exam_id,test_id,base_url) {
var test = document.getElementById('pdfdiv_1').innerHTML;
console.log(test);
$.ajax({
          type: 'POST',
          data: {test : test,exam_id:exam_id,test_id:test_id},
          url: base_url+"reports/reports_pdf_new/skill_finder",
          success: function (data) {
           window.location.href = base_url+"reports_pdf_new/"+exam_id+"/"+test_id;        
          },
});
}
</script> 

When I am printing the console output, it is only printing the first section part but not the second section tag.

The output in console is :

<section class="report">
<div class="top-box"></div>
<div class="row"> 
<div class="col-md-12 text-center">
<img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
 width: auto;">
</div>
<div class="col-md-5">
<div class="info-wrapper">
    <?php if(!empty($user_details->st_profile)){ ?>
      <img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>"  style="width: 22%;">
      <?php } else {?>
    <img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
    <?php } ?>

   <div class="info-wrap-inner">
       <p><span>Name </span> : <?php echo $user_details->st_name;?></p>
       <p><span>Age </span>  : <?php echo $age;?></p>
       <p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
       <p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
       <p><span>Email </span> : <?php echo $user_details->st_email;?></p>
       <p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
  </div>
  </div>
  </div>
  <div class="col-md-7 report-wrapper">
    <h1 class="heading">SKILL FINDER TEST REPORT</h1>
    <p><?php echo $test_details->description;?></p>
  </div>


  </div>
  </div>

  </section>

Can anyone help me out in this ?

I cant print all the html code present inside the div pdfdiv_1.

The html code :

<div class="download-pdf">
          <div class="row">
            <div class="col-12">
                <div class="card p-4 mt-0">
                <h2 class="text-center mb-0">Congratulations!</h2>
                <p class="lead text-center" style="margin-top: -18px">
                  <br>
                <div class="button-wrapper" style="text-align: center;">
                  <button onclick="pdfP(<?php echo $exam_id;?>,<?php echo $test_id;?>,'<?php echo base_url();?>')" class="btn btn-primary d-block mx-auto">Download PDF</button>
                  <span id="pdfloader"></span> 
                </div>
                </div>
            </div>
          </div>
        </div>

Answer

There are some mistakes on html tags placement.

This code might fix them :

<div id="pdfdiv_1">
    <section class="report">
        <div class="top-box"></div>
        <div class="row">
            <div class="col-md-12 text-center">
                <img src="<?php echo base_url()?>reports-assets-new/images/banner.png" class="bannerimg" style="
width: auto;">
            </div>
            <div class="col-md-5">
                <div class="info-wrapper">
                    <?php if(!empty($user_details->st_profile)){ ?>
                    <img src="<?php echo base_url();?>uploads/user-profile/<?php echo $user_details->st_profile;?>"  style="width: 22%;">
                    <?php } else {?>
                    <img src="<?php echo base_url()?>reports-assets-new/images/img2.png">
                    <?php } ?>

                    <div class="info-wrap-inner">
                        <p><span>Name </span> : <?php echo $user_details->st_name;?></p>
                        <p><span>Age </span>  : <?php echo $age;?></p>
                        <p><span>Education </span> : <?php echo $user_details->st_qualification;?></p>
                        <p><span>Mobile </span> : <?php echo $user_details->st_mobile;?></p>
                        <p><span>Email </span> : <?php echo $user_details->st_email;?></p>
                        <p><span>Date of test </span> : <?php $s=$user_details->c_date; $dt = new DateTime($s); $date = $dt->format('d-m-Y'); echo $date; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-7 report-wrapper">
                <h1 class="heading">SKILL FINDER TEST REPORT</h1>
                <p><?php echo $test_details->description;?></p>
            </div>


        </div>

</section>
<section class="skills">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1><span>IDENTIFY SKILLS BASED ON YOUR INTERESTS</span></h1>
            </div>
        </div>

        <div class="row">
            <?php echo $test_details->description3;?>

        </div>
        </div>
</section>


</div><!-- pdfdiv close -->

Generally the IDE show these errors in red. Example with IntelliJ softwares :