jQuery to retrieve value of input array

You can use .serializeArray()

You don't need to specify input in the selector neither (if unique)

var colorCost = $('[name="color_cost[]"]').eq(0).val();
var colorCostArray = $('[name="color_cost[]"]').serializeArray()

console.log(colorCost)
console.log(colorCostArray[0].value)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="color_cost[]" value="100" size="3">
<input type="text" name="color_cost[]" value="200" size="3">
<input type="text" name="color_cost[]" value="300" size="3">
<input type="text" name="color_cost[]" value="300" size="3">

You are using a wrong selector if you put 0 between the brackets, it should be 'input[name="color_cost[]"]', it will give you a collection of elements.

var colorCost = $($('input[name="color_cost[]"]')[0]).val();
console.log(colorCost);

Then with $('input[name="color_cost[]"]')[0] you can get the first one, and wrap it inside $() so it's read as jQuery object, and you can use .val() with it.

And if you want to get all the inputs values in an array, you can use:

var inputs = Array.from($('input[name="color_cost[]"]')).map(function(input){
    return $(input).val();
});

Demo:

var colorCost = $($('input[name="color_cost[]"]')[0]).val();
console.log(colorCost);

var inputs = Array.from($('input[name="color_cost[]"]')).map(function(input) {
  return $(input).val();
});
console.log(inputs);
console.log(inputs[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="color_cost[]" value="100">
<input type="text" name="color_cost[]" value="200">
<input type="text" name="color_cost[]" value="300">
<input type="text" name="color_cost[]" value="300">