JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="btns">
    <input type="radio" value="1" id="btns-btn1" name="some_var">
        <label for="btns-btn1">Choose 1</label>
    <input type="radio" value="2" id="btns-btn2" name="some_var">
        <label for="btns-btn2">Choose 2</label>
</div>
        
        <button id="addone">Add One</button>

JavaScript

$('#btns').buttonset()
$('#addone').click(addone);
var buttons = [1,2];
var next = 3;
function addone() {
    var $btns = $('#btns');
    var template = '<input type="radio" value="{next}" id="btns-btn{next}" name="some_var">' +
        '<label for="btns-btn{next}">Choose{next}</label>';
    buttons.push(next++);
    $btns[0].innerHTML = buttons.map(function(i) {
        return template.replace(/\{next\}/g, i);
    }).join('');
    $btns.buttonset('refresh');
}