JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<!doctype html>
<html>
  <body>
    <div id="container"></div>
    <div>
      <button id="submit">Create Radio Buttons</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() {

    var radios = ['Email', 'Phone', 'Mail'];

    for (var value of radios)
    {
      $('#container').append(
        $('<input>').prop({
          type: 'radio',
          id: value,
          name: 'contact',
          value: value
        })
      ).append(
        $('<label>').prop({
          for: value
        }).html(value)
      )
    }
  })
});