Вы можете перебирать элементы с классом item_name и создавать массив объектов, каждый из которых имеет свойство name и qty.

Вы можете легко создать этот массив, используя jQuery .map():

var details = $('.item_name').map(function() {
  return {
    name: $(this).val(),
    qty: $(this).next('.item_qty').val()
  };
}).get();

console.log(details);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

Эквивалентом ассоциативного массива в javascript является объект (оба действуют как словарь).

Проблема заключается в том, что ваш html описывает ключ и значение как входные данные в плоском списке, поэтому, когда вы перечисляете их с помощью JQuery .each(), вы возвращаете их все в один список.

[key, value, key, value]

то, что вы, скорее всего, хотите, это объект вроде:

var obj = {
  key: value,
  key: value
}

Затем вы можете получить, например, свойство «macbook»

obj.macbook or obj['macbook']

Вы можете добиться этого, либо перебирая список по два за раз и добавляя их к объекту, либо реструктурируя свой html, чтобы иметь входы как ключа, так и значения внутри другого элемента, например.

<div class="item">
 <input type="text" class="item_name" value="iphone">
 <input type="text" class="item_qty" value="10">
</div>
<div class="item">
 <input type="text" class="item_name" value="macbook">
 <input type="text" class="item_qty" value="5">
</div>

Затем вы можете сделать что-то вроде этого:

var items = {}
$('.item').each(function(){
 var key = $(this).find('.item_name').val()
 var value = $(this).find('.item_qty').val()
 items[key] = value;
})

var val = $("input.item_name").map(function(){
obj = {}

obj[$(this).val()] = $(this).next("input.item_qty").val();

return obj;
}).get()

console.log(val)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

Используйте .map()

Вы можете использовать рекурсию, Array.prototype.slice() для нарезки двух элементов <input> при каждом вызове функции, заполнения объекта парами ключей и значений до тех пор, пока не будет достигнуто <input> элементов .length

var [obj, n] = [{}, 2];
var inputs = $("input[type=text]");
var res = (function re(i) {
  if (i + n <= inputs.length) {
    var [key, prop] = Array.from(inputs).slice(i, i + n).map(({value}) => value)
    obj[key] = prop;
    i += n;
    return re(i)  
  } else {
    return obj
  }
})(0);
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

Вы можете попробовать быстрое и «грязное» решение:

Ссылка: для каждого типа ввода получить значение с помощью javascript

Вы были на правильном пути с .getElementById, но вместо этого хотите .getElementsByName.

var els = document.getElementsByName("filter[]");

for (var i = 0; i < els.length; i++)
  alert(els[i].value);

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

Или выполните следующее: jQuery .each() с элементами ввода

Чтобы извлечь номер:

var arrNumber = new Array();
$('input[type=number]').each(function(){
    arrNumber.push($(this).val());
})

Чтобы извлечь текст:

var arrText= new Array();
$('input[type=text]').each(function(){
    arrText.push($(this).val());
})

Редактировать: .map реализация

var arrText= $('input[type=text]').map(function(){
    return this.value;
}).get();