JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button type="button" id="add">Add</button> 
<div class="form-group" id="musics"></div>

JavaScript

$(function () {
    
    $('#add').on('click', function (ix, el) {
        var index = $('#musics div').length + 1;

        $('<div class="form-group col-sm-offset-4 col-sm-5 music" name="music" id="music' + index + '"><div class="input-group col-sm-4"><span class="input-group-addon"><input type="radio" name="have' + index + '" value="" id="have" data-name="haveAdd"></span><span class="input-group-addon"><b>Have</b></span></div><br><div class="input-group col-sm-4"><span class="input-group-addon"><input type="radio" name="have' + index + '" value="" id="want" data-name="wantAdd"></span><span class="input-group-addon"><b>Want</b></span></div>').appendTo('#musics');
           
    });


    $('#musics').on('change', '#want',function(e) {
        $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
        var ans=$(this).val();
        console.log(($('#want').is(':checked')));
    });
      
       
});