Question

I want to get “The walking dead” also but it only gets the first hidden. Can i put a class on .this or how should I do?

$(".articel input[type='button']").click(function(){                    
        var price = $(this).siblings("input[type='hidden']").attr("value");
        var quantity =  $(this).siblings("input[type='number']").attr("value");
        var name = $(this).siblings("input[type='hidden']").attr("value");
        var ul = document.getElementById("buylist"); 
        var prod = name + " x " + quantity + " " + price + "$";

        var el = document.createElement("li"); 
        el.innerHTML = prod; 
        ul.appendChild(el);

<form class="articel">
        Quantity: <input type="number" style="width:25px;"><br>
        Add to cart: <input type="button" class="btn">
        <input type="hidden" value="30">
        <input type="hidden" value="The walking dead">
</form>

Answer 1

The conventional way to identify form fields is by the name property.

HTML:

<input type="hidden" name="title" value="The walking dead">

jQuery:

var name = $(this).siblings('input[name=title]').val();

Your current selector, siblings("input[type='hidden']"), selects all hidden field siblings, but since you have no way to discern them, attr will always just yield the value of the first match.

You could also have iterated over your collection of elements, or accessed them by index siblings('input[type=hidden]:eq(1)') or siblings('input[type=hidden]').eq(1), for instance, but it is a poor design that will break your code if you add another hidden field for something else. You really should prefer to name your elements so that you can access them in a meaningful way and know your data. That way you’ll be free to move around and modify your markup according to new requirements, without breaking your script.

By the way, I’m using .val() above, which is shorthand for .attr('value').