javascript to dynamically add a textbox

Question

I am trying to dynamically add a text box based on the selection of dropbox. When the user selects 'other' a text box gets generated asking them to explain the other. The user can dynamically add mutiple dropboxes, resulting in multiple text boxes if other is selected value in dropbox. Every generated dropbox has a unique name which gets read and placed in id of dynamically generated textbox.

The problem i am facing is that when there are multiple dropboxes and the first dropbox selection is something other that 'Other' and second dropbox value is other, the text box generated is placed in front of the first dropbox where it should be placed in front of the dropbox relevant to it.

The html code is as follows for the dropbox:

<div id="container">

    <label id="rightlabel"for="dropbox1"></label>
    <span>
      <select id="frequency" onclick="getData(this, name)" name="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]"></select>
      <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]"></span>
    </span>
<div id="hiddenothertexbox"></div>
</div>

Javascript is as follows:

function getData(title, i) {

var value = title.options[title.selectedIndex].value; 
var y = i.replace(/-/g, '')
$('#hiddenother').attr('id', y);

if (value == 'Other') {

    str = '<label id="leftlabel">if other, please specify</label><span><input id="textboxid" class="text-box single-line" type="text" value="" name="textbox ></input></span>';       
    $('#'+y).html(str);         
}
else {
    str = '';
    $('#'+y).html(str);       
}
 }

teh javascript gets the names of the dropbox and replaces the id of 'hiddenanothertextbox' with that id so its unique. I have an idea of the problem, i think its because when the user does not click teh first dropbox the id of 'hiddenanothertextbox' does not change for the first dropbox and when another dropbox is added and the value is changed, the hiddenanothertextbox for first dropox value changes adding it in front of first not second. I am struggling to achieve teh required result.

UPDATED JAVASCRIPt

function getData(title, i) {

var value = $(title).val();
var y = i.replace(/-/g, '');
$('#hiddenother').attr('id', y);

if (value == 'Other') {

    str = '<label id="leftlabel">if other, please specify</label><span><input id="textboxid" class="text-box single-line" type="text" value="" name="textbox"" ></input></span>';       
    $(title).after(str);         
}
else {

    $(title).nextUntil('#textboxid').remove();       
}
}

Answer 1

Working Demo

Use this code snippet.

var flag = 0;
function getData(title, i) {

var value = $(title).val();

  var y = i.replace(/-/g, '');
  $('#hiddenother').attr('id', y);

  if (value == 'Other' ) {
      if(flag == 0){
          flag=1;
          str = '<label id="leftlabel">if other, please specify</label><span><input id="textboxid" class="text-box single-line" type="text" value="" name="textbox"></input></span>';       
          $(title).after(str); 
      }        
  }
  else {
    flag=0;
    $(title).nextUntil('#textboxid').remove();       
  }
}

Html :

<select id="frequency" onchange="getData(this, name)" name="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]">

---

Changes :

• var value = $(title).val() gives you the correct value
• Use onchange="getData(this, name)" instead of onclick=".."
• In variable str : name="textbox" did not have ending "
• use .after() or .append() instead of .html()