Condiment Display V2.0

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/v/bs5/dt-1.13.1/b-2.3.3/fh-3.3.1/r-2.4.0/sp-2.1.0/sl-1.5.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/dt-1.13.1/b-2.3.3/fh-3.3.1/r-2.4.0/sp-2.1.0/sl-1.5.0/datatables.min.css">
<script src="https://unpkg.com/fast-average-color/dist/index.browser.min.js"></script>
    <!-- <div class="titlebar">
      <h1>
        <a>The Test Gallery</a>
      </h1>

      <h2>
        <a>sauce navigation menu</a>
      </h2>
    </div> -->
    
    <button id="updateRow" type="button">
Update rows
</button>
    
    
<div class="container-fluid"> <!--https://stackoverflow.com/questions/46469036/setting-a-minimum-width-for-responsive-bootstrap-layout-->
  <div class="titlebar">
  <!-- https://getbootstrap.com/docs/5.0/components/navbar/ -->
  <!-- https://stackoverflow.com/questions/41301318/create-responsive-bootstrap-navbar-with-two-rows -->
  <!-- https://stackoverflow.com/questions/65643279/bootstrap-navbar-two-rows-with-second-row-full-screen-width -->
  <!-- https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2-rows -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark nav-wrapper">

          <a class="navbar-brand" href="/"><img id="brandLogo" src="" class="img-fluid" width="200" height="200" alt="The Condiment Packet Gallery"></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"><span aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"...

CSS

/**** Housekeeping ****/
@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");
@import url("https://fonts.googleapis.com/css?family=Caveat&display=swap");
:root {
    /**** Dafult values for variables set in the js ****/
    --condimentColor: white;
    --condimentColorAlt: white;
}

.thumbnailsizeandtrim {
  width: 60px;
  height: 110px;
}

.container-fluid{
    padding: 0 !important;
}

/**** Page styling ****/
   .titlebar { /* Remove space below header */
      position: sticky;
      top: 0px;
      background-color: black;
      z-index: 999;
    }

    h1 { /* Remove space below header */
      margin: 0;
      padding: 0;
      font-size: 4vmax;
      font-weight: lighter;
      color: #FFFFFF;
      font-family: "Fredoka One", cursive;
      transition: transform 0.25s; /* Animation */
      transform-origin: left;
    }

    h1:hover{
      cursor: pointer;
      transform: scale(1.05); /* Animation Zoom */
    }

    html {
      overflow-y: scroll; /* scrollbar does not take up any page width */
      background: black;
    }

    body {
      background: black;
    }

/**** Table Styling ****/
    table.dataTable {
      margin-top: 25px !important;
      border-collapse: collapse !important;
    }

    table.display.dataTable > tbody > tr.selected > *  {
      box-shadow: inset 0 0 0 9999px var(--condimentColorAlt);
    }

    table.display.dataTable > tbody > tr.odd.selected > *  {
      box-shadow: inset 0 0 0 9999px var(--condimentColorAlt);
    }

    table.display.dataTable > tbody > tr.selected:hover > *  {
      box-shadow: inset 0 0 0 9999px var(--condimentColor);
    }

/**** Search Bar Styling ****/
    .row {
      justify-content: space-between;
      background-color: var(--condimentColorAlt);
      z-index: 999;
      margin-left: 0;
      margin-right: 0;
      border-top: 10px solid var(--condimentColorAlt);
      border-bottom: 10px solid var(--condimentColorAlt);
    }
    
    div.dataTables_filter {
   ...

JavaScript

$(document).ready(function() {
  //Get the sauce type from the table to pull from the json:
  var sauceType = $('#condimenttable').attr('sauceType');
  var sauceVariation = $('#condimenttable').attr('variation');

  //Assign css variables colors associated with the sauceType
  if (sauceType == "ketchup") {
    document.documentElement.style.setProperty('--condimentColor', '#D93939');
    document.documentElement.style.setProperty('--condimentColorAlt', '#880000');
  } else if (sauceType == "mustard") {
    document.documentElement.style.setProperty('--condimentColor', '#F2D82F');
    document.documentElement.style.setProperty('--condimentColorAlt', '#827107');
  } else if (sauceType == "mayo") {
    document.documentElement.style.setProperty('--condimentColor', '#126FF1');
    document.documentElement.style.setProperty('--condimentColorAlt', '#000055');
  } else if (sauceType == "asian") {
    document.documentElement.style.setProperty('--condimentColor', '#8A2BE2');
    document.documentElement.style.setProperty('--condimentColorAlt', '#483D8B');
  } else {
    document.documentElement.style.setProperty('--condimentColor', '#555555');
    document.documentElement.style.setProperty('--condimentColorAlt', '#333333');
  }

  var table = $('#condimenttable').DataTable({
    //'autoWidth': false,

    fixedHeader: {
      header: true,
      //headerOffset: 165
      //headerOffset: $('#h1').outerHeight()
    },

    select: {
      style: 'os',
      selector: 'td:not(:nth-child(1))',
      blurable: true
    },

    responsive: {
      details: {
        type: 'column',
        target: 2,

        display: $.fn.dataTable.Responsive.display.modal({}),
        renderer: function(api, rowIdx, columns) {
          var data = $.map(columns, function(col, i) {
            return col.hidden ?
              '<img src="https://www.condimentpacket.com/img/' + col.data + '.jpg">' :
              '';
          })

          return data
        }
      }
    },

    'ajax': {
 ...