simplify this jinja template ''' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SearchBarInput').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");

  $('#CB_OPF_table').find('tr').each(function() {
    var $table = $(this);
    
    if (!($table.find('td').text().search(patt) >= 0)) {
      $table.not('.myHead').hide();
    }
    if (($table.find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });
 
});

  $("#ResetButton").each(function() {
    $(this).click(function(){
      $("#SearchBarInput").val('');
      location.reload();
    $("td").css({"white-space": "nowrap"});
    })
  });


});
</script>


<script type="text/javascript">
function filterText()
    {  
        var val = $('#HZL').val().toLowerCase();
        if(val === "")
           return;
        if(val === "all")
          location.reload();
          /*clearFilter();*/
        else
        $('.hazardlevel').each(function() {
            $(this).parent().toggle($(this).text().toLowerCase() === val);
            });

    }

function showHide(button) {
  var links = button.parentNode.getElementsByTagName("a");
  for (var i = 1; i < links.length; i++) {
    if (links[i].style.display === "none") {
      links[i].style.display = "inline";
        button.innerHTML = "<i class='fa fa-minus'></i>";
        button.classList.add("less-button");        
    } else {
      links[i].style.display = "none";
        button.innerHTML = "<i class='fa fa-plus'></i>";
        button.classList.remove("less-button");

    }
  }
}

</script>


<script type="text/javascript">
$(function() {
    $("#CB_OPF_table input[type=checkbox]").on("change", function(e) {
        var id = $(this).parent().index()+1,
            col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
        $(this).is(":checked") ? col.show() : col.hide();
    }).prop("checked", true).change(); 

    $("#ResetButton").on("click", function(e) {
        $("input[type=checkbox]").prop("checked", true).change();
    });

//below function dynamically hide/show columns
$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();

});

})
</script>

<script  type="text/javascript">
$(function() {
  $("#CB_OPF_table").tablesorter({ sortList: [[0,0], [1,0]] });
});

</script>

<link rel="stylesheet" href="styles.css">

</head>
<body>
<div class="search-bar">
  <input id="SearchBarInput" class="searchbarinput" type="text" placeholder="Search anything...">
  <button id="ResetButton" class="resetbutton" type="button">RESET</button>
<span class="column-toggle">
    <input type="checkbox" name="ameid">AME ID |
    <input type="checkbox" name="floc">FLOC |
    <input type="checkbox" name="sapid">SAP ID |
    <input type="checkbox" name="nextext">Next Ext |
    <input type="checkbox" name="nextint">Next Int |
    <input type="checkbox" name="notes" checked>Notes |
    <input type="checkbox" name="recommendation">Recommendation |
    <input type="checkbox" name="maintplan">Maint Plan |
    <input type="checkbox" name="drawingfile">Drawing |
    <input type="checkbox" name="inspectionaccess">Access |    
      Hazard Level <select id="HZL"  onchange='filterText()'>
                        <option disabled selected></option>
                        <option value="all">All</option>                        
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>                                                
                        <option value="E">E</option>                        
    </select></span>
</div>
<div class="table-container">
<table id="CB_OPF_table" class="hoverTable">
<thead><tr class="myHead"><th>ID</th>


{%- for col_header in df.columns.tolist() %}
  {%- if col_header in ['Item Type','Location','SN','Manufacturer','ManuDate','DesignReg','PlantReg','DP','Vol','InspDate'] %}
  <th class="header">{{col_header}}</th>
  
  {%- elif col_header in ['AMEID','FLOC','SAPID','NextExt', 'NextInt','Notes','Recommendation','MaintPlan','DrawingFile','InspectionAccess'] %}
  <th class="header {{col_header | lower  }}">{{col_header}}</th>

  {%- elif col_header in ['HZL'] %}
  <th class="dropdown-header">{{col_header}}</th>
  {%- endif %}
{%- endfor %}</tr></thead>


<tbody id="CB_OPF_data">
{%- for index,row in df.iterrows() %}
<tr>
<td class="fixed"><a href="{{ '/'.join([root,index]) }}">{{index}}</a></td>
  {%- for col in columns %}
    {%- if col not in ['AMEID', 'FLOC', 'SAPID', 'HZL', 'DrawingFile', 'SN', 'InspDate', 'DesignReg','PlantReg', 
                        'ManuDate','NextExt', 'NextInt','Notes','Recommendation','MaintPlan',
                        'MDRFile', 'DesignRegFile', 'InspReportFile', 'PlantRegFile','InspectionAccess'] %}
        <td>{{row[col]}}</td>

    {%- elif col in ['AMEID', 'FLOC','SAPID', 'Notes','Recommendation','MaintPlan','InspectionAccess'] %}
        <td class=" {{col | lower  }}">{{row[col]}}</td>

    {%- elif col in ['HZL'] %}
        <td class="hazardlevel">{{row[col]}}</td>

    {%- elif col in ['SN'] %}
        {%- if row['MDRFile'] | length > 3 %} 
        {%- set file=row['MDRFile'].strip("[]' ") %}
        <td class="url"><a href="{{ '/'.join([root,index,file]) }}">{{ row[col] }}</a></td>
        {%- else %}
        <td class="url">{{ row[col] }}</a></td>
        {%- endif %}

    {%- elif col in ['DrawingFile'] %}
        {%- if row[col] | length > 3 and row[col] !='' %}     
        <td class="{{col | lower  }} url">
        {% for file in row['DrawingFile'].split(",") |reverse %}
            {% if loop.first %}
            <a href="{{ '/'.join([root,index,file.strip("[]' ")]) }}" >{{index}} GA</a>&nbsp
            {% if row['DrawingFile'].split(",") |length>1 %}
            <button class="more-button" onclick="showHide(this)"> <i class="fa fa-plus"></i> </button> &nbsp     
            {% endif %}
            {% else %}
            <a href="{{ '/'.join([root,index,file.strip("[]' ")]) }}" style="display:none">{{ file.strip("[]' ") }}</a> &nbsp
            {% endif %}
        {% endfor %}
        </td>
        {%- elif row[col]=='nan' %}
        <td class="{{col | lower  }} "></td>        
        {%- endif %} 

    {%- elif col in ['InspDate'] %} 
        {%- if row['InspReportFile'] | length > 3 and row[col] !='' %} 
        <td class="url">
        {% for file in row['InspReportFile'].split(",") |reverse %}
            {% if loop.first %}
            <a href="{{ '/'.join([root,index,file.strip("[]' ")]) }}" >{{ row[col]  }}</a>&nbsp
            {% if row['InspReportFile'].split(",") |length>1 %}
            <button class="more-button" onclick="showHide(this)"> <i class="fa fa-plus"></i> </button> &nbsp     
            {% endif %}
            {% else %}
            <a href="{{ '/'.join([root,index,file.strip("[]' ")]) }}" style="display:none">{{ file.strip("[]' ") |regex_replace  }}</a> &nbsp
            {% endif %}
        {% endfor %}
        </td>

        {%- else %}
          {%- if row[col] =='' %}
            <td class="noinspect">not inspected</a></td>
          {%- else %}
            <td class="noinspect">{{row[col]}}</a></td>          
          {%- endif %} 
        {%- endif %}

    {%- elif col in ['DesignReg'] %}
        {%- if row['DesignRegFile'] | length > 3 %} 
        {%- set file=row['DesignRegFile'].strip("[]' ") %}        
        <td class="url"><a href="{{ '/'.join([root,index,file]) }}">{{ row[col] }}</a></td>
        {%- else %}
        <td class="url">{{ row[col] }}</a></td>
        {%- endif %}

    {%- elif col in ['PlantReg',] %}
        {%- if row['PlantRegFile'] | length > 3 %} 
        {%- set file=row['PlantRegFile'].strip("[]' ") %}                
        <td class="url"><a href="{{ '/'.join([root,index,file]) }}">{{ row[col] }}</a></td>
        {%- else %}
        <td class="url">{{ row[col] }}</a></td>
        {%- endif %}
 
    {%- elif col in  ['ManuDate','NextExt', 'NextInt'] %}
        <td class="{{ col | lower  }}">{{ row[col] }}</a></td>          
    {%- endif %}
  {%- endfor %}
</tr>
{%- endfor %}
</tbody>
</table>

</body>
</html> '''