JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">

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

CSS

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

JavaScript

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)
      )
    )
    if (obj.type === "internal")
      $(".box:last").append($('<button>').addClass('.edit-btn').text('Edit')

      )
  });
}