JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<html>
  <body>
    <div id="container"></div>
    <br>
    <div>
      <button id="generate">Generate</button>
    </div>
  </body>
</html>

CSS

label {
  font-size: 1rem;
  font-family: sans-serif;
  padding-right: 10px;
}

button,
select {
  font-size: .9rem;
  padding: 2px 5px;
}

JavaScript

$(document).ready(function() {
	$('#generate').click(function() {
        
        var values = ["dog", "cat", "parrot", "rabbit"];

        $('#container')
        .append(
            $(document.createElement('label')).prop({
                for: 'pets'
            }).html('Choose your pets: ')
        )
        .append(
            $(document.createElement('select')).prop({
                id: 'pets',
                name: 'pets'
            })
        )

        for (const val of values) {
            $('#pets').append($(document.createElement('option')).prop({
                value: val,
                text: val.charAt(0).toUpperCase() + val.slice(1)
            }))
        }
    })
});