JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<html>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <body>

    <div class="container-fluid">

      <div class="col-6" id="template">

        <h3 id="display-form-job-title"></h3>

        <div class="button-group">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="far fa-edit"></i></button>

          <!-- Button trigger PDF -->
          <button type="button" class="btn-pdf" id="pdf-trigger" data-toggle="" data-target="#pdfprint"><i class="fas fa-file-pdf"></i>
                  </button>
        </div>

        <hr>

        <h4>Hiring Goals:</h4>

        <div class="col-12">
          <table class="table order-list" id="hiring-goals-table">

            <thead>
              <tr>
                <td>Number of Hires</td>
              </tr>
            </thead>

            <tbody id="tbody-hire">
              <tr></tr>
            </tbody>

          </table>

        </div>

        <hr>


        <h4>Open Searches:</h4>

        <div class="col-12">
          <table class="table order-list" id="role-table">

            <thead>
              <tr>
                <td>Location</td>
                <td>Role</td>
                <td>Active</td>
              </tr>
            </thead>

            <tbody>
              <tr id="openRowBody"></tr>
            </tbody>

          </table>


        </div>

        <h4>Roles Filled:</h4>

        <div class="col-12">
          <table class="table order-list" id="role-table">

            <thead>
              <tr>
                <td class="thead-num"></td>
                <td class="thead-emp">Name</td>
                <td class="thead-loc-fill">Location</td>
                <td class="thead-role-fill">Role</td>
                <td...

CSS

/* .container-fluid {
    width: 60% !important;
} */

.container {
  margin-right: 0 !important;
}

.col-6 {
  background-color: rgb(222, 223, 228);
  margin-bottom: 4rem;
  padding: 2rem;
}

h3,
h4 {
  padding-left: 0.95rem;
}

.btn.btn-primary {
  margin-left: 0.75rem;
}

#addRow {
  width: 50%;
}

/* ------- table ------- */

.table td {
  vertical-align: initial !important;
}

/* ------------- Display Form ------------- */

#display-info-table,
#hiring-goals-table,
#role-table {
  background-color: white;
}

#display-info-table thead,
#hiring-goals-table thead,
#role-table thead {
  font-weight: bold;
}

#custom-file-id {
  margin-left: 0.95rem;
  width: 95%;
}

.button-group {
  float: right;
  margin-top: -40;
  /* works for now, but do something else */
}

.btn {
  height: 2.4rem;
  width: 4rem;
}

#template {
  display: hidden;
}

/* ------------- Custom Form/Modal ------------- */

.modal {
  display: hidden !important;
}

.modal-dialog {
  max-width: 50rem !important;
  margin: 1.75rem auto;
}

#modal-form {
  max-height: 30rem;
  max-width: 100%;
  overflow-y: auto;
}

JavaScript

let jsonData = {
  "d": {
    "results": [{
      "Title": "A",
      "GoalRange": "3",
      "Office": "Office-A",
      "Role": "a",
      "IsFilled": false,
      "Employee": "No",
      "IsActive": true,
      "Notes": "notes"
    }, {
      "Title": "A",
      "GoalRange": "3",
      "Office": "Office-A",
      "Role": "a",
      "IsFilled": true,
      "Employee": "Bobson Dugnutt",
      "IsActive": false
    }]
  }
}



function _displayForm() {

  /// This consolidates JSON so each Office, Role, etc. falls under the correct Job Title Group
  let titleKeyHolder = [];
  let titleArr = [];

  jsonData.d.results.forEach(function(item) {
    titleKeyHolder[item.Title] = titleKeyHolder[item.Title] || {};
    let obj = titleKeyHolder[item.Title];
    if (Object.keys(obj).length == 0)
      titleArr.push(obj);

    obj.Title = item.Title;
    obj.TitleGroup = obj.TitleGroup || [];

    obj.TitleGroup.push({
      GoalRange: item.GoalRange,
      Office: item.Office,
      Role: item.Role,
      Name: item.Employee,
      IsFilled: item.IsFilled,
      IsActive: item.IsActive
    });
  });

  console.log(JSON.stringify(titleArr))





  const openSearches = jsonData.d.results.filter((item, id) =>
    item.IsFilled !== true);

  openSearches.forEach((openItem, id) => {
    let clonedDiv = $("#template").clone();
    clonedDiv.removeAttr("id");

    clonedDiv.find("#display-form-job-title").append(openItem.Title);

    clonedDiv.find("#tbody-hire").append(`<td>${openItem.GoalRange}</td>`);

    clonedDiv.find("#openRowBody").append(
      `<td>${openItem.Office}</td>
				<td>${openItem.Role}</td>
				<td>${openItem.IsActive}</td>`
    );

    clonedDiv // combining clonedDiv .finds and .removes doesn't work
      .find("#display-form-job-title")
      .removeAttr("id");

    clonedDiv
      .find("#openRowBody")
      .removeAttr("id");

    $("#titleBody").append(clonedDiv);
  })








  const filledRoles = jsonData.d.results.filter((item, id) =>
   ...