Hide a button in the dynamic div if it satisfies a condition

've a dynamic div which contains some information and an edit button. But, some of these dynamic divs should be editable.

I'm generating all of these dynamic divs from my array of objects, which holds the data for objects which have type="external" or "internal".

Each dynamic div will have a class called 'box' and each dynamic edit button has a class called 'edit-btn'.

So, I've a condition like, if in dynamic div the obj.type="external" then the edit button should be available else it should be hidden.

How do I achieve this?

var myData = [{company: "ABC", url:"www.abc.com", type:"internal"},{company: "CDE", url:"www.cde.com", type:"internal"},{company: "DEF", url:"www.def.com", type:"external"},{company: "EFG", url:"www.efg.com", type:"internal"},{company: "FGH", url:"www.fgh.com", type:"external"}];
$('#createData').click(function(){
  createDisplay();
});

function createDisplay(){
  myData.forEach(function(obj){
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
        $('<br /><button>').addClass('.edit-btn').text('Edit')
      )
    )
  });
}

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

<script src="http://ift.tt/2nSb99o"></script>
<div class="container">
                        
</div>

<button id="createData">Create divs</button>