JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

body{
  font-family:helvetica;
}

.workflow-behavior-form-intergration-component{
  max-width: 560px;
  margin: auto;
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 15px;
}
.workflow-behavior-form-intergration-component h1{
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 25px;
}
.workflow-behavior-form-intergration-component p{
  font-size: 13px;
  text-align: center;
  margin: 25px;
}
.workflow-behavior-form-intergration-component h1>img{
  height:48px;
  vertical-align: middle;
  margin-right: 10px;
}
.workflow-behavior-form-intergration-component table{
  width: 100%;
}
.workflow-behavior-form-intergration-component table th {
    border-bottom: solid 1px #000;
    font-size: 11px;
    line-height: 11px;
    width: auto;
}
.workflow-behavior-form-intergration-component table th>em{
  font-weight: normal;
  font-size: 8px;
  line-height: 8px;
  display: block;
  margin-top: 2px;
}
.workflow-behavior-form-intergration-component table table{
  margin-top: 5px;
}
.workflow-behavior-form-intergration-component table td p {
    color: #356DB0;
    margin: 0px;
    font-size: 10px;
}
.workflow-behavior-form-intergration-component table table{
  margin-left: -6px;
  margin-right: -6px;
  width: calc(100% + 12px);
}
.workflow-behavior-form-intergration-component table table th {
    background-color: #356DB0;
    color: #fff;
    font-weight: normal;
}
.workflow-behavior-form-intergration-component table table td {
    background-color: #cae2ff;
    color: #0f2f56;
    font-weight: normal;
    padding: 0px;
}
.workflow-behavior-form-intergration-component table table td select{
    border-radius: 0px;
}
.workflow-behavior-form-intergration-component table table td input[type="text"]{
    border-radius: 0px;
}
.workflow-behavior-form-intergration-component table td button.add-workflow-rule-button {
    background-color:...

JavaScript

class workFlowBehaviorIntegrationComponent{

  constructor(parentElement,configuration,formDataProperties,formsList,callback){

    this.parentElement = parentElement;
    this.configuration = configuration;
    this.formDataProperties = formDataProperties;
    this.formsList = formsList;

    this.callback = callback;

    this.ui;

    this.build();

  }

  build(){

    if(this.ui){

      this.ui.remove();

    }

    this.ui = $(`<div class="workflow-behavior-form-intergration-component"><h1><img src="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/assets/form-sequence.svg">Configure WorkFlow Behaviors For This Form</h1><p>Form Workflow Behaviors can be added at the form level and when the specified properties are set within the thresholds specified can trigger new forms to be required. These forms are then grouped together for better management and viewing.</p><table cellspacing="0" cellpadding="5"><tbody class="headers"><tr><th>Behavior Name:</th><th>Form Required</th><th style="width: 94px;">Required Before<br><em>(The current form cannot be submitted until this form has been submitted)</em></th><th>Controls</th></tr></tbody><tbody class="contents"></tbody></table><button class="add-workflow-behavior-button"><span>+</span>Add Workflow Behavior</button></div>`);

    this.ui.find('button.add-workflow-behavior-button').click(() => {

      this.configuration.push({
        "name": "",
        "rules": [],
        "formID": "",
        "formName": "",
        "formRequiredBefore": false
      });

      this.callback(this.configuration);

      this.build();

      this.ui.find('>table>tbody.contents>tr.behavior').last().addClass('editable');
      this.ui.find('>table>tbody.contents>tr.behavior-rules').last().addClass('editable');

      this.ui.find('>table>tbody.contents>tr.behavior').last().find('input[name="name"]').focus();

    });


    for(let...