jQuery - storing variables from PHP foreach loop

I'm just having a play around, trying to sharpen my jQuery knowledge and I've run into an issue I can't wrap my head around. I'm using laravel, just as a side note, but this would also apply to standard PHP.

I'm essentially retrieving a collection of data that I want to manipulate with jQuery. The list that is retrieved will constantly vary in size; for example:

• There are a collection of objects.
• Each object has a certain amount of items attached to it.
• Each item has a name and amount.
• When retrieved I want to be able to display the name and amount of each item.
• If I then change the amount. I want each items amount to change accordingly.

Here is my Code:

@foreach($items as $item)
<li><span class="item_amount">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach 

This retrieves all the items associated to this object: In this case we see something like:

• 400 item1
• 67 item2
• 830 item3

I've a very simple HTML <select> input:

<select id="steven" class="formDropdown">
    <option>Select item amount</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

What I then want to do is retrieve the amount of each item, store it as a variable in jQuery and then when the <select> amount is changed, the item amount will by multiplied by it.

For example if 2 was selected from the select input the list would change to:

• 800 item1
• 134 item2
• 1660 item3

I've figured out that the best way to retrieve the amount is to set the variable as the PHP.

var originalAmount = '{{ $item->amount }}';

My reason for doing it this way is because if I select the value of the HTML within the <span> tag, each time I multiply it multiplies the displayed amount rather than the original amount. An example:

If the amount was 10 and I multiply by 3 the result is 30, if iI then multiply by 2, expecting 20 (10*2) I obviously now get 60.

Not what I want at all.

As you can see my problem here is that I need to set a variable for each of the items in my foreach loop, where I've tried doing something like this:

$( ".item_amount" ).each(function( index ) {
    alert( amount+ ": " + $( this ).text() );
});

Which alerts me the amount of each in order, all well and good however I now want to store those amounts as a variable that correspond to it's position in the list:

I've tried to do something like this to get a dynamic variable name:

@foreach($items as $item)
<li><span class="item_amount{{$item->amount}}">{{ $item->amount }}</span>{{ $item->name }}</li>
@endforeach

This will give me a dynamic class which I could then select and manipulate which is perfect.

However how do I store each of these as a variable inside jQuery?

1. variable 1 would be named "item_amount400" with value of 400
2. variable 2 would be named "item_amount67" with value of 67
3. variable 3 would be named "item_amount830" with value of 830

Which I want to achieve doing what I've mentioned above:

var item_amount400 = '{{ $item->amount }}';

I'm probably doing this the most back to front way and thinking way too much into this.

Could the variable be created inside the foreach loop and then retrieve all of them outside the loop? E.g. like this:

@foreach($items as $item)
<li><span class="item_amount{{$item->amount}}">{{ $item->amount }}</span>{{ $item->name }}</li>
<script>
    make variable here
</script>
@endforeach

If so, how would I go about doing that and how can I make the variables global and know exactly what to retrieve?

Like I mentioned each objects have a different amount of items, some may have 3 some may have 30.