JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<div style="margin:10px;" id="generate">
    <div  id="3">
        <span>111</span>
        <input type="radio" checked="checked" name="radioBtn_3" value="Radio 1" data-i="1">
        <input type="radio" name="radioBtn_3" value="Radio 2" data-i="2">
        <input type="radio" name="radioBtn_3" value="Radio 3" data-i="3">
    <div id="input_id"></div>
    </div>

    <div  id="4">
        <span>222</span>
        <input type="radio" checked="checked" name="radioBtn_4" value="Radio 1" data-i="1">
        <input type="radio" name="radioBtn_4" value="Radio 2" data-i="2">
        <input type="radio" name="radioBtn_4" value="Radio 3" data-i="3">
        <div id="input_id"></div>
    </div>

    <div  id="5">
        <span>333</span>
        <input type="radio" checked="checked" name="radioBtn_5" value="Radio 1" data-i="1">
        <input type="radio" name="radioBtn_5" value="Radio 2" data-i="2">
        <input type="radio" name="radioBtn_5" value="Radio 3" data-i="3">
        <div id="input_id"></div>
    </div>
</div>

JavaScript

$('input').on('change', function(){
    if($(this).is(':checked') && $(this).data('i') == 3){
        //do stuff
        $(this).append("<input type='text' name='aa' />");
    }
});