responsiveDataTableWithBootStrap5Issues

HTML

<!DOCTYPE html>
<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
      
      <link href="https://cdn.datatables.net/v/bs5/dt-2.1.6/r-3.0.3/datatables.min.css" rel="stylesheet">
 
      <script src="https://cdn.datatables.net/v/bs5/dt-2.1.6/r-3.0.3/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <button class="btn btn-primary" onClick="drawAllTables()">draw all tables</button>
    <div class="container" style="max-width=5px !important;">
      <h4>1. table with .table-responsive class and autoWidth: false</h4>
      <p>Description:</p>
      <ol>
        <li>&#x2714; Initial run with full large window doesn't show the expand indicator </li>
        <li>&#x274C; any redraw, regardless of window size, incorrectly shows expand icon</li>
        <li>&#x274C; Must manually redraw with different window size to update the expanded options</li>
      </ol>
      <button class="btn btn-primary" onClick="drawTableOne()">draw</button>
        <div class="row">
          <div class="col-12">
              <table id="responsiveTrueAutoWidthFalse" class="table table-responsive datatable table-bordered" style="width: 100%;">
                  <thead>
                      <tr>
                          <th>Alpha</th>
                          <th>Bravo</th>
                          <th>Charlie</th>
                          <th>Delta</th>
                          <th>Echo</th>
                          <th>Foxtrot</th>
                          <th>Golf</th>
                          <th>Helicopter</th>
                          <th>Indigo</th>
                          <th>Juliet</th>
                         ...

JavaScript

var tableOne;
var tableTwo;
var tableThree;
var tableFour;

var data = [
  {
    alpha: "a123",
    bravo: 'b123',
    charlie: 'c123',
    delta: 'd123',
    echo: 'e123',
    foxtrot: 'f123',
    golf: 'g123',
    helicopter: 'h123',
    indigo: 'i123',
    juliet: 'j123',
    kilo: 'k123',
    lema: 'l123',
    mary: 'm123',
    november: 'n123'
  }
];

var cols = [
  { data: 'alpha' },
  { data: 'bravo' },
  { data: 'charlie' },
  { data: 'delta' },
  { data: 'echo' },
  { data: 'foxtrot' },
  { data: 'golf' },
  { data: 'helicopter' },
  { data: 'indigo' },
  { data: 'juliet' },
  { data: 'kilo' },
  { data: 'lema' },
  { data: 'mary' },
  { data: 'november' }
];

function drawTableOne(){
	console.log('clicked draw one')
	if (tableOne) { tableOne.destroy();	}

	tableOne = setTableWithSettings('responsiveTrueAutoWidthFalse', false);
}

function drawTableTwo(){
	console.log('clicked draw Two')
	if (tableTwo) { tableTwo.destroy();	}

	tableTwo = setTableWithSettings('responsiveTrueAutoWidthTrue', true);
}

function drawTableThree(){
	console.log('clicked draw Three')
	if (tableThree) { tableThree.destroy();	}

	tableThree = setTableWithSettings('responsiveFalseAutoWidthFalse', false);
}

function drawTableFour(){
	console.log('clicked draw Four')
	if (tableFour) { tableFour.destroy();	}

	tableFour = setTableWithSettings('responsiveFalseAutoWidthTrue', true);
}
              
drawAllTables();

function drawAllTables(){
	drawTableOne();
	drawTableTwo();
	drawTableThree();
	drawTableFour();
}

function setTableWithSettings(tableId, autoWidthVal){
  return $('#'+tableId).DataTable({
		data: data,
        columns: cols,
		responsive: true,
		autoWidth: autoWidthVal,
		pagingType: 'simple'
	});      
}

/* (function() {
    var url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
    if (typeof DT_Debug != 'undefined') {
        if (DT_Debug.instance !== null) {
            DT_Debug.close();
        } else {
            new DT_Debug();
        }
    } else...