JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

</div>

<button id="createData">Create divs</button>
<!-- Modal -->

<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
  <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">Update Data</h4>
    </div>
    <form id="updateForm">
    <!-- Modal Body -->
      <div class="modal-body">
        <div class="form-group">
          <label class="col-sm-4 control-label" for="companyName">Company Name</label>
        <div class="col-sm-8">
        <input type="text" class="form-control" id="companyName" placeholder="Company Name" required />
        </div>
        </div>
        <div class="form-group">
        <label class="col-sm-4 control-label" for="companyUrl">Website</label>
        <div class="col-sm-8">
        <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required />
        </div>
      </div>
       <div class="form-group">
        <label class="col-sm-4 control-label" for="newToolName">Tool Name</label>
        <div class="col-sm-8">
        <input type="text" class="form-control" id="newToolName" />
        </div>
      </div>
       <div class="form-group">
        <label class="col-sm-4 control-label" for="newToolUrl">Tool URL</label>
        <div class="col-sm-8">
        <input type="url" class="form-control" id="newToolUrl" />
        </div>
      </div>
      </div>
  <!-- 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: "internal"
}, {
  company: "CDE",
  url: "www.cde.com",
  type: "internal"
}, {
  company: "DEF",
  url: "www.def.com",
  toolName: "reportTool",
  toolURL: "http://www.toolURL.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() {
  $('.container').empty();
  myData.forEach(function(obj) {
  $('.container').append(
  $('<div>').addClass('box').append(
  $('<label>').text('Company Website: '),
  $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
  obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr({'data-toggle':'modal', 'data-target':'#updateData'}) : ''
  )
  )
  });
}

var objIndex;
$(document).ready(function(){
  objIndex = '';
  $(document).on('click', '.edit-btn', function(){
     var objIndex = $(this).parents('.parent').index();

    var $toolName = $('#newToolName');
    var $toolURL = $('#newToolUrl');
    var $toolInputs = $($toolName).add($toolURL);

    $toolInputs.on('change', function(e) {

      var toolName = $toolName.val();
      var toolURL = $toolURL.val();

      $toolInputs.prop('required', toolName || toolURL);

    });
  });

  $('#updateForm').submit(function(e){
    var toolName = $toolName.val()
    var toolURL = $toolURL.val()

    var toolFilled = !!toolName && !!toolURL;
    var toolUnfilled = !toolName && !toolURL;

    if (toolFilled || toolUnfilled) {
      updateData(objIndex);
      return false;
    }
    return false;
  })
});

function updateData(index) {
  companyName = $('#companyName').val();
  companyUrl = $('#companyUrl').val();
  toolName = $('#newToolName').val();
  toolURL = $('#newToolUrl').val();
  var upObj = {
    company: companyName,
    url: companyUrl,
    toolName: toolName,
    toolURL: toolURL,
    type:...