JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>
DATA COMPONENT 1:
<select class="dynamic-form-data-component" data-table="facilities" data-table-alias="Facilities" data-table-connect="false">
</select>
</p>
<p>
DATA COMPONENT 2:
<select id="selectedElement" class="dynamic-form-data-component" data-table="facilities" data-table-alias="Facilities" data-table-connect="false">
</select>
</p>
<p>
DATA COMPONENT 3:
<select class="dynamic-form-data-component" data-table-connect="false" data-table-field="name" data-table-operator="=" data-table-query="My Specific Equiment"  data-table="agGear_equipment" data-table-alias="Equipment">
</select>
</p>
<p>
DATA COMPONENT 4:
<select class="dynamic-form-data-component" data-table-connect="true" data-table-connect-to="facilities" data-table="clientPortal_compliance_documents" data-table-alias="Compliance Documents">
</select>
</p>

CSS

.dynamic-form-data-ui{
  position: absolute;
  right:0px;
  top:0px;
  width:200px;
  background-color:#eee;
  padding:10px;
  font-family:helvetica;
  font-size: 11px;
  
}
.dynamic-form-data-ui>h3{
  font-family:helvetica;
  font-size: 12px;
  text-align:center;
}
.dynamic-form-data-ui>div{
  
}
.dynamic-form-data-ui>div.dynamic-component-filtering{
  background-color:#fff;
  color:#444;
  padding:8px;
  text-align:center;
}
.dynamic-form-data-ui>div.dynamic-component-connection{
  background-color:#fff;
  color:#444;
  padding:8px;
  text-align:center;
}
.dynamic-form-data-ui>div.dynamic-component-linkto{
  background-color:#fff;
  color:#444;
  padding:8px;
  text-align:center;
}
.dynamic-form-data-ui>div input[type="radio"]{
  float:left;
  clear:left;
}
.dynamic-form-data-ui>div input[type="text"]{
  width: calc(100% - 12px);
  border:solid 1px #ccc;
  padding: 5px;
  margin-top:5px;
  margin-bottom:5px;
  text-align:center;
}
.dynamic-form-data-ui>div select{
  width:100%;
  margin-top:5px;
  margin-bottom:5px;
  border:solid 1px #ccc;
  padding: 5px;
}
.dynamic-form-data-ui>div select.highlight{
  outline: none;
  box-shadow: 0px 0px 5px purple;
  background-color:purple;
  color:#fff;
}

.dynamic-form-data-ui>div button{
  width: calc(50% - 2px);
  margin-top:5px;
  margin-bottom:5px;
  border:solid 1px #ccc;
  padding: 5px;
  font-size: 11px;
  cursor: pointer;
  background-color: #999;
  color:#fff;
  transition: all 0.3s;
}
.dynamic-form-data-ui>div button.update{
  background-color: #009f38;
}
.dynamic-form-data-ui>div button.update:hover{
  background-color: #79b77e;
}
.dynamic-form-data-component{
  
  background-color: #c1d9f6;
  color:#356DB0;
  border-color: #356DB0;
}
.dynamic-form-data-component.selection{
  outline: none;
  box-shadow: 0px 0px 5px #009f38;
  background-color:#009f38;
  color:#fff;
}
.dynamic-form-data-component.highlight{
  outline: none;
  box-shadow: 0px 0px 5px purple;
  background-color:purple;
  color:#fff;
}

JavaScript

window.components = [];

$('.dynamic-form-data-component').each(function(){

	window.components.push({
  	component: this,
    options: {
    
    }
  });

});



function dataComponentConnector(element){

	var t = this;
  
  $('.dynamic-form-data-ui').remove();
  $('.dynamic-form-data-component').removeClass('highlight');
  $('.dynamic-form-data-component').removeClass('selection');
  
  
  t.parent = $('body');
  t.components = $('.dynamic-form-data-component');
  t.selectedElement = element;
  
  t.selectedElement.addClass('selection');
  
  t.tables = new Array("facilities","students","instructors","agGear_equipment","agGear_ppe","clientPortal_compliance_documents");
	t.tableAliases = new Array("Facilities","Employees","Managers","Equipment","PPE","Compliance Documents");
  
  t.connectableTables = new Array(
  	[],
    ["facilities"],
    ["facilities","students"],
    ["facilities"],
    ["facilities"],
    ["facilities","instructors"],
  );
  
  t.connectableTableAliases = new Array(
  	[],
    ["Facilities"],
    ["Facilities","Employees"],
    ["Facilities"],
    ["Facilities"],
    ["Facilities","Managers"],
  );
  
  t.selectableColumns = new Array(
  	['id','name'],
    ['id','facility_id','fname','lname'],
    ['id','facility_id','employee_id','fname','lname'],
    ['id','facility_id','name'],
    ['id','facility_id','name'],
    ['id','facility_id','name'],
  );
  
  t.selectableColumnAliases = new Array(
  	['id','name'],
    ['id','facility_id','fname','lname'],
    ['id','facility_id','student_id','firstname','lastname'],
    ['id','facility_id','name'],
    ['id','facility_id','name'],
    ['id','facility_id','name'],
  );
  
  t.operators = new Array("=","<>",">","<","like");
  t.operatorAliases = new Array("is equal to","is not equal","is greater than","is less than","contains");
  
  t.getTableindexByName = function(name){
  
  	for(var i=0;i<t.tables.length;i++){
    
    	if(t.tables[i] == name){
      
      	return i;
      
      }
    
...