i face the problem on display the result on the selected option and checked box? i am using html and pure javascript

i face the problem on display the result on the selected option and checked box? i am using html and pure javascript I want to display the selected data in the table when one checkbox is checked and one agency is selected. I try to do but cannot. I am new to the programming.

Here is the example data agdropdown: [{ag_id: "690", ad_id: "410", agency_short_name: "HQ", agency_full_name:'HQ', ag_id: "690", ad_id: "411", agency_short_name: "HR", agency_full_name: "HR"

  fyafyidropdown: [{label: "FYA", value: "fya"}, {label: "FYI", value: "fyi"}]
   
    listing: 
    agadgroup_690_410_fya: {
    0: {mail_serial_no: "(To Be Generated After Filing)", mail_subject: "Test Outgoing Mail 
    20/04/2021",…}
    mail_serial_no: "(To Be Generated After Filing)"
    mail_subject: "Test Outgoing Mail 20/04/2021"
    mail_type_value: "Outgoing Mail"
    mail_url: "https:/scs_dashboard=1"
    pending_count: 1}
   Below is my code.
       <div>
 <script type="text/x-handlebars-template" id="proactus1-source">
 <div class="mb-1 m-h-4 flex justify-end items-center">

 <input type="checkbox" id="fyafyi_select"class="fyafyi-checkbox cursor-pointer" name="checkbox 
 " onchange="proactus_update(this)" value="" ><label class="fyafyi-label mr-4 ml-2 
  self- 
  center text-md" value=""></label>
  
  <select id="agency_select" onchange="proactus_update()" class="rounded-md shadow-md border p-2 w- 
    64" style="width: 50%;">
   
   <option value="_" >
  
   </option>
    </select> </div>

    <div class="my-table">
    <table class="tbl  mt-5 w-full border-collapse" id="proactus_table_contents">
    <thead class="text-white border border-gray-400 bg-gray-400">
    <tr class=" flex-1 text-center">
    <th class="align-middle w-40 py-4">Mail Type</th>
     <th class=" text-left align-middle w-60 py-4">Mail</th>
     <th class=" text-left align-middle w-48 py-4">Subject</th>
     <th class=" text-left align-middle min-w-6 w-9 py-4">#</th>
      </tr>
    </thead>
    </table>
    <table class="tbl w-full p-0 border-collapse" id="proactus_table_contents">
    <tbody class=" divide-black divide-y-2 divide-opacity-25">
     <tr id="mail-spinner" class="hidden"><td colspan="4" style="text-center"> 
     <i class="fas fa-circle-notch fa-spin text-blue-600"></i> Loading...</td></tr> 
    
    
    <tr agad_group="" class="cursor-pointer" >
    <td><span     
    class="mail_type  text-sm py-4 px-0 rounded-md"> 
    </span></td>
    <td class="text-sm align-middle w-60 py-4 px-0"></td>
    <td class="text-sm py-4 px-0"></td>
    <td class=" text-sm text-left py-4 px-0 align-middle min-w-6 w-9"><a href="" 
    target="_blank"></a></td>
    </tr>
    
    
    </tbody>
    </table>
 <div class="mb-1 m-h-4 flex justify-end items-center">

 <input type="checkbox" id="fyafyi_select"class="fyafyi-checkbox cursor-pointer" name="checkbox 
 " onchange="proactus_update(this)" value="" ><label class="fyafyi-label mr-4 ml-2 
self-center text-md" value=""></label>
  
  </div>  
 
    </script>
    <div id="proactus1-contents"></div></div>