JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

</div>

<button class="btn btn-info" id="createData">Create divs</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmpForm">Add Employee</button>
		
    <!-- Modal -->

<div class="modal fade" id="addEmpForm" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Add Employee</h4>
      </div>
      <form id="updateForm">
        <!-- Modal Body -->
        <div class="modal-body">
          <div class="form-group">
            <label class="col-sm-4 control-label" for="empName">Employee Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="empName" required/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="empProfile">Profile</label>
            <div class="col-sm-8">
              <input type="url" class="form-control" id="empProfile" required/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="comp">Company</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="comp" required/>
            </div>
          </div>
        </div>
        <!-- Modal Footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
...

CSS

.box {
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

JavaScript

var myData = [{
  company: "ABC",
  url: "www.abc.com",
  type: "company"
}, {
  company: "CDE",
  url: "www.cde.com",
  type: "company"
}, {
  company: "DEF",
  url: "www.def.com",
  type: "company"
}];

$('#createData').click(function() {
  createDisplay();
});
function createDisplay() {
  $('.container').empty();
  myData.forEach(function(obj) {
    if(obj.type==="company"){
      $('.container').append(
        $('<div>').addClass('box').append(
          $('<label>').text('Company Website: '),
          $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company)
        )
      );
    } else if(obj.type==="employee"){
      $('.container').append(
        $('<div>').addClass('box').append(
          $('<label>').text('Employee Name: '),
          $('<span>').text(obj.employee),
          $('<br /><label>').text('Company: '),
          $('<span>').text(obj.company),
        )
      );
    }
  });
}

$('#updateForm').submit(function(){
  createEmp();
  return false;
});

$(document).on('click', '.edit-btn', function(){
  index = getIndex(this);

});

function createEmp(){
  var obj = {
    "employee" : $('#empName').val(),
    "profile" : $('#empProfile').val(),
    "company" : $('#comp').val(),
    "type" : "employee"

  }
  //console.log(obj);
  myData.push(obj);
  createDisplay();
}