jQuery - Get value of inputs in array

Question

For each input field on the page, that has an ID ending in "_name" and "_value", I've placed in two arrays. And for each of the values of the input (there are equal number of inputs for the nameArr and valArr) in the name array I would like to place before the input of the namrArr as a heading, then hide the input. However, I cannot seem to access to the value of the input once it's placed in an array??

var name = $("[id$=_name]");
var nameArr = $.makeArray(name);
var val = $("[id$=_value]");
var valArr = $.makeArray(val);

for(var i = 0; i < valArr.length; i++){
    $(nameArr[i]).before("<h3>"+nameArr[i].val()+"</h3>");
    $(nameArr[i]).hide();
}

Answer 1

You could simplify it, as your jQuery selector is already returning an array:

$("[id$=_name]").each(function (index, item) {
    $(this).before("<h3>" + $(this).val() + "</h3>");
    $(this).hide();
});

Answer 2

You don't need to make it an array, it already is.

for(var i = 0; i < val.length; i++){
    $(name[i]).before("<h3>"+$(name[i]).val()+"</h3>");
    $(name[i]).hide();
}

Answer 3

use map()..

  var valuesArray=$("[id$=_name]").map(function(){
      return this.value;
 }).get();

  var namesArray=$("[id$=_value]");


 for(var i = 0; i < namesArray.length; i++){
   $(namesArray[i]).before("<h3>"+valuesArray[i]+"</h3>");
   $(namesArray[i]).hide();
 }