JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<div class="grp-cnt"></div>

JavaScript

function RenderWithAllFieldsVisible(marxtonGroup) {
  // Must retrieve this boolean from the group at the start of this
  // function, because unfortunately the getters we call later on
  // have side-effects that can change the `hasFields` outcome. Can
  // be removed once JIRA-12345 has been solved.
  var useSafariHack = marxtonGroup.hasFields();
  
  var $groupContainer = $(".grp-cnt");
  
  $("<input/>").attr("name", "name").val(marxtonGroup.name).appendTo($groupContainer);
  $("<input/>").attr("name", "coach").val(marxtonGroup.coach).appendTo($groupContainer);

  $("<input type='checkbox' />").attr("name", "hasPet").val(marxtonGroup.hasPet).appendTo($groupContainer);
  $("<input type='checkbox' />").attr("name", "isAlive").val(marxtonGroup.isAlive).appendTo($groupContainer);
  
  // TODO: Dropdowns & Radios
  
  // Workaround for Safari bug, see http://stackoverflow.com/a/1732454/419956
  if (useSafariHack) { $groupContainer.hide().show(); }
}

RenderWithAllFieldsVisible({
  name: "Johndoe",
  coach: "van gaal",
  hasPet: true,
  isAlive: false,
  hasFields: function() { return true; }
});