javascript - clicked on radio button one time but input box is generating more than 1 -

javascript - clicked on radio button one time but input box is generating more than 1 -

i generating dynamic input box radio button selection. doing problem there.

using select box generating radio button html , radio button, trying generate 1 input box on selection of every lastly radio button.

problem: when have clicked on radio button 1 time why input box generating more 1.

jsfiddle : http://jsfiddle.net/4a4fy/

.

jquery

$("input[data-target='generateinput']").on('click', function (e) { var targetid = $(this).parent("div").attr("id"); var t = $("div#input_" + targetid).append("<input type='text' name='aa' />"); });

html

<select id="e1" name='selecttag' multiple> <option value="abc" data-id='1' id='1'>abc</option> <option value="def" data-id='2' id='2'>def</option> <option value="ghi" data-id='3' id='3'>ghi</option> <option value="jkl" data-id='4' id='4'>jkl</option> <option value="mno" data-id='5' id='5'>mno</option> </select> <div id='generate' style='margin:10px;'></div>

it expected behavior, because appending elements target element,

try utilize .html() @ context accomplish task..

$("input[data-target='generateinput']").on('click', function (e) { var targetid = $(this).parent("div").attr("id"); var t = $("div#input_" + targetid).html("<input type='text' name='aa' />"); }); demo

or write status block code flow if input has been appended already,

$("input[data-target='generateinput']").on('click', function (e) { var targetid = $(this).parent("div").attr("id"); var elem = $("div#input_" + targetid); if(elem.find('input[name=aa]').length) { return; } var t = elem.append("<input type='text' name='aa' />"); }); demo

javascript jquery html css