JSFiddle - React, Tailwind, and code Playground

by crduling

HTML

<div class='display-polls-container'>
</div>


<button id='user-created-poll'>Click for new poll</button>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  position: absolute;
  top: 0;
  right: 2%;
  width: 25%;
  height: 10%;
}

.poll-container {
  border-style: solid;
}

JavaScript

$("#user-created-poll").click(function() {

  $(".display-polls-container").append("<div class='poll-container'><form><div class='title'><p class='user'>Username</p><p class='title-text'>Poll title</p></div><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='0'>First option</div></label><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='1'>Second item</div></label></form></div>");


  $("input:radio").click(function() {

    var value = $(this).val();
    alert(value);

  });
});


//How do I make it so that when I click on one of the inputs, it only gives the value of the input that I'm clicking and not the value of all the inputs?