JSFiddle - React, Tailwind, and code Playground

HTML

<div id='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

let counter = 0;
$("#user-created-poll").click(function() {
  let newHtml = "<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>";

  //use "appendTo", which returns the appended element (rather than its container thereof)
  let appended = $(newHtml).appendTo("#display-polls-container");
  //then attached the click handler ONLY to the newly appended element's radio buttons
  $(appended).find("input:radio").click(function(){alert($(this).val())});
});


//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?