JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<!doctype html>
<html>
<body>
    <div id="container"></div>
    <div>
      <button id="submit">Create Checkbox</button>
    </div>
</body>
</html>

CSS

p,
label {
  font: 15px 'Exo 2', sans-serif;
}

input {
  margin: 6px;
}

button {
  margin-top: 10px;
  padding: 2 2;
  font: 15px 'Exo 2', sans-serif;
}

JavaScript

$(document).ready(function() {
  $('#submit').click(function() {

    $('#container').append(
      $(document.createElement('input')).prop({
        id: 'myCheckBox',
        name: 'interest',
        value: 'car',
        type: 'checkbox'
      })
    ).append(
      $(document.createElement('label')).prop({
        for: 'myCheckBox'
      }).html('Car')
    ).append(document.createElement('br'));
  })
});