After creating dynamic inputs along with its dynamic id's by append, only the latest generated input field gives values
Other dynamic input fields return empty string
Note: I'm able to get all values of dynamic inputs by using for loop and pushing inside an array, but i also want to get each input individually on key up . But only final input field created gives value
Here is my fiddle,
https://jsfiddle.net/xd8nvktf/3/
Not able to come up with a solution, Help is appreciated
--Thanks
HTML
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<button type = "button" class = "btn btn-primary" id = "addInput">Add Input Fields</button>
<div id = "inputAdder">
</div>
</body>
JS/JQUERY
var a = 0;
var fieldValue;
var dataStored = [];
var valueStored = [];
$("#addInput").on("click", function() {
a += 1;
fieldValue = `#filter-value${a}`;
$("#inputAdder").append(
`<div class = "row" id="appender${a}">
<div class="col-md-4 padderSpace">
<input id="filter-value${a}">
</div>
</div>`
)
dataStored.push({value:fieldValue});
console.log(dataStored)
})
$("#inputAdder").on("keyup",fieldValue,changeFunc);
function changeFunc(){
console.log($(fieldValue).val());
valueStored = [];
for(let i = 0;i<=dataStored.length;i++){
valueStored.push({value:$(dataStored[i].value).val()})
console.log(valueStored)
}
}
