Array.foreach only gets val() from the last input id with keyup

Question

Please help me figure out why only the last input id gets its value added to the input id= #attr3 with keyup.

I need both inputs in the div to have their values put into the input outside the div separated with a comma(,). i made a fiddle https://jsfiddle.net/dc6v6gjd/1/. Thanks

<div id ="candy">
   <input type="text" id="attr1" name="emailAddress" value="">
   <input type="text" id="attr2" name="emailAddress" value="">
</div>
   <input type="text" id="attr3" name="username" value="">

$(document).ready(function () {

    var text = $("#candy :input").map(function () {
              return this.id; 
                        }).get();        
        var attr = [];

        for (i=0; i<text.length; i++) {
                attr.push('#'+ text[i]);
                }
        var mat = attr.join(", ");

    $(mat).keyup(function(){
         update();

    function update() {
        attr.forEach(function(index, i){
        // alert(i);
           $("#attr3").val( $(attr[i]).val() + "," );           

        });
      }      
   });

});

Answer 1

The reason is you're overriding the value of attr3 on each iteration of forEach. You could instead use join to get the value.

e.g.

function update() {
  var val = attr
    .map(function(a) { 
      return $(a).val(); 
    })
   .join(",");

   $("#attr3").val(val);
}

That being said I'd probably go with a simpler solution like this.

// set the keyup event handler and add all inputs to an array.
var inputs = $("#candy :input").keyup(function() {
  update();
}).get();

// read all input values into comma separated string and update attr3
function update() {
  var val = inputs.map(function(i) {
    return $(i).val();
  }).join(",");
  
  $("#attr3").val(val);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
  <input type="text" id="attr1" name="emailAddress" value="">
  <input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attr3" name="username" value="">

Update: Support dynamically added inputs.

$(document).on("keyup", "#candy :input", function() {
  update();
});

function update() {
  var val = $("#candy :input").get().map(function(i) {
    return $(i).val();
  }).join(",");

  $("#attrFinal").val(val);
}

var count = 3;
$("#add").click(function() {
  $("#candy").append("<input type='text' id='attr" + count++ + "' name='emailAddress' />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
  <input type="text" id="attr1" name="emailAddress" value="">
  <input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attrFinal" name="username" value="">

<button id="add">Add New</button>