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>

           ...

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...