dynamic input with buttons you can click

working

by J. Jones

HTML

Desired behavior:
<br>
<input type=text id="item" title="item" autofocus></input>
<input type=text id="category" title="category"></input>
<input title="add time estimate" type="button" id="time_est_button" value="+">
<span id="time_est_input">
   <input type='text' id='time_est' title="time estimate"/>
</span>

<hr/>Dynamically generated inputs with buttons don't behave as above:
<br>
<p id="form_list_parent"></p>
<input type="button" id="additembutton" value="add item" onclick="addAnotherItem()" />
<br/>

CSS

#time_est_input {
    display: none
}
#due_est_input {
    display: none
}

JavaScript

$(document).ready(function () {
  
  
   
 $( "body" ).on( "click", "input[id^='time_est_button']", function() {
     
 
$(this).next().toggle();

     

});   
});

var g_ = new Object();
g_.counter = 1;

function addAnotherItem() {
    var input = document.createElement("input");
    input.title = "item";
    input.type = "text";
    input.id = "item" + g_.counter.toString();
    input.value = "";

    var inputCat = document.createElement("input");
    inputCat.title = "category";
    inputCat.type = "text";
    inputCat.id = "category" + g_.counter.toString();
    inputCat.value = "";

    var tesid = "time_est_input" + g_.counter.toString();
    
    var timeEstSpan = document.createElement("span");
    timeEstSpan.id = tesid;
    timeEstSpan.style.cssText = "display:none;";

    var timeEstButton = document.createElement("input");
    timeEstButton.title = "Add Time Estimate";
    timeEstButton.type = "button";
    timeEstButton.value = "+";
    timeEstButton.id = "time_est_button" + g_.counter.toString();
    timeEstButton.setAttribute("myspan", tesid);
    timeEstButton.onClick = function () {
        var tesid = this.getAttribute('myspan');
        var myspan = $(tesid);
        myspan.toggle();
    };

    var inputTimeEst = document.createElement("input");
    inputTimeEst.title = "time estimate";
    inputTimeEst.type = "text";
    inputTimeEst.id = "time_est" + g_.counter.toString();
    inputTimeEst.value = "";

    timeEstSpan.appendChild(inputTimeEst);
    var br = document.createElement("br");
    $('#form_list_parent').append(input);
    $('#form_list_parent').append(inputCat);
    $('#form_list_parent').append(timeEstButton);
    $('#form_list_parent').append(timeEstSpan);
    $('#form_list_parent').append(br);
    $(input).focus();

    g_.counter += 1;

}