JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>



<table
  data-toggle="table"
  data-show-columns="true"
  data-pagination="true"
  data-page-list="[10, 25, 50, 100, all]" 
  data-show-columns-toggle-all="true"
  data-show-export="true"
  data-click-to-select="true"
>
  <thead>
  
    <tr class="tr-class-1">
      <th data-field="index">	Index	</th><th data-field="">	Manual Rank	</th><th data-field="">	PropID	</th><th data-field="">	Project	</th><th data-field="">	Borough	</th><th data-field="">	Park Name	</th><th data-field="">	Asset Name	</th><th data-field="">	COMMUNITYBOARD	</th><th data-field="">	COUNCILDISTRICT	</th><th data-field="">	DEPARTMENT	</th><th data-field="">	ZIPCODE	</th><th data-field="">	Yr Built	</th><th data-field="">	Type	</th><th data-field="">	Asset Type	</th><th data-field="">	Status	</th><th data-field="">	Capital Pipeline	</th><th data-field="">	Contract Type	</th><th data-field="">	Flag for Safety	</th><th data-field="">	Field Size	</th><th data-field="">	Estimated Replacement Cost	</th><th data-field="">	Rating	</th><th data-field="">	Permit Use Hrs	</th><th data-field="">	Num Hazards	</th><th data-field="">	Net Benefit	</th><th data-field="">	Cost/Benefit	</th><th data-field="">	Estimated Year to be Actioned	</th><th data-field="">	Inspected	</th><th data-field="">	Cumulative Cost	</th>

    </tr>
  </thead>
  <tbody>
    <tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table">
      <td id="td-id-1" class="td-class-1" data-title="bootstrap table">
        <a...

CSS

table{
  font-size:12px
}

JavaScript

$(document).ready(function() {



  let url = new URL(window.location.href);
  let urlParams = new URLSearchParams(url.search);

  let record_id = urlParams.get('id');
  let record_desc = urlParams.get('desc');
  let record_type = urlParams.get('type');
  let record_status = urlParams.get('status');

  if (record_desc) {
    record_desc = record_desc.replace(/%20/g, ' ');
  }

  let recordDivs = document.querySelectorAll('.record_id');
  recordDivs.forEach(div => {
    div.innerHTML = record_id;
  });

  let saveBtn = document.getElementById('record-save');
  saveBtn.href = "05-Saved.html?id=" + record_id

  // comments
  function resizeTextarea() {
    $(this).css('height', 'auto');
    $(this).css('height', this.scrollHeight + 8 + 'px');
  }

  function resizeAllTextareas() {
    $('.auto-resize').each(function() {
      resizeTextarea.call(this);
    });
  }

  resizeAllTextareas();

  $(document).on('click', '.nav-link', function() {
    resizeAllTextareas();
  });

  $(document).on('input', '.auto-resize', function() {
    resizeTextarea.call(this);
  });

  //synth
  let synthSelect = document.getElementById('nav-synth-select');
  let synthGSA = document.getElementById('synth-GSA');

  const setGSAValue = (element) => {
    let selectedOptionText = element.options[element.selectedIndex].text;
    selectedOptionText = selectedOptionText.replace("GSA: ", "");
    synthGSA.value = selectedOptionText;
  }

  synthSelect.selectedIndex = 0; // select the first option
  setGSAValue(synthSelect);

  synthSelect.addEventListener('change', function(e) {
    setGSAValue(e.target);
  });

  //build
  let buildSelect = document.getElementById('nav-build-select');
  let buildGSA = document.getElementById('build-GSA');

  const setBuildGSAValue = (element) => {
    let selectedOptionText = element.options[element.selectedIndex].text;
    selectedOptionText = selectedOptionText.replace("GSA: ", "");
    buildGSA.value = selectedOptionText;
  }

  buildSelect.selectedIndex...