Create dynamic content based on the object property

I'm working on application which will create dynamic content based on the type of object. The object type can be 'company' or 'employee'.

The objects with the type 'employee' are created using bootstrap modal.

I'm facing with a small problem when I'm doing that.

The dynamic content is getting duplicated when I'm generating that. Also, when I add consecutive objects using modal, the content gets refreshed or lost.

How do I fix it?

Here's my code

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() {
//$('.box').html('');
  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();
}                

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

<link rel="stylesheet" href="http://ift.tt/2apRjw3">
                <script src="http://ift.tt/2nSb99o"></script>
                <script src="http://ift.tt/2aHTozy"></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">
      Close
      </button>
      <button class="btn btn-primary">
      Save changes
      </button>
    </div>
    </form>
  </div>
  </div>
</div>