Fetching association with selected options in dropdown PHP CART - php

Question

When i select a product in my gallery it goes to my cart.
I get my product id and store them in a session.
And in my cart i got to select size and which fabric i want to order my product.
My product is cushion.
My cart.php has all function to make the cart session work,
and has all the buttons functions too.
I display my selected products in my page checkout.php ... i call my cart function in that page...
To select size and fabric i have 2 dropdowns, the size dropdown is static html options, and my fabrics are getting data from my DB.
Look this image before...
As you see i got these two tables.
When i select my fabric and it size i want to fetch the value in the fabrics prices table.
My cart a got a session where it grabs the user state.
If the user is in the same state that i am,the price of the fabric will be one cost else it will be other cost.(IN_state,Out_state columns).
My QNTD row in the cart table is quantity $value
Valor is value of costs in pt-br.
A bad thing is that my dropdown dont save the selected option.
lets say that i selected a fabric Velvet and size 50x50.
And i click on add or less button my page will refresh and all options will be lost.
What i did is store the selected option using LocalStorage.
It works only for the first row in the checkout.
How can i get all these data to work with out submitting something.
Maybe i can use more sessions to get all data and make the calculation.
But im a bit lost in all this.
What can i do to get this working all together ?
my cart code..
<?php
include_once '../incluedes/conn_cms.php';
// gets the product id from gallery and store in session and add +1
if(isset($_GET['add'])){
$select = "SELECT * FROM gallery2 WHERE id=" . escape_string($_GET['add'])." ";
$run_selection = mysqli_query($conn,$select);
while($rows = mysqli_fetch_assoc($run_selection)){
if($rows['id'] != $_SESSION['product_'.$_GET['add']]){
$_SESSION['product_' . $_GET['add']]+=1;
header('Location: index.php');
}else{
$msg = "error";
header('Location: checkout.php');
}
}
}
//the plus button
if(isset($_GET['plus'])){
$_SESSION['product_'.$_GET['plus']]+=1;
if($_SESSION['product_'.$_GET['plus']] < 1){
header('Location: checkout.php');
}else{
header('Location: checkout.php');
}}
//the minus button
if(isset($_GET['remove'])){
$_SESSION['product_'.$_GET['remove']]--;
if($_SESSION['product_'.$_GET['remove']] < 1){
header('Location: checkout.php');
}else{
header('Location: checkout.php');
}
}
//the remove button
if(isset($_GET['delete'])){
$_SESSION['product_'.$_GET['delete']] = '0';
header('Location: checkout.php');
}
function cart(){
global $conn;
$fabric_options = '';
$query2 = "SELECT * FROM almofadas";
$result = mysqli_query($conn,$query2);
while($rows = mysqli_fetch_assoc($result)){
$fabric_options .= "<option value=''>{$rows['tecido']}</option>";
}
foreach ($_SESSION as $name => $value) {
if($value > 0){
if(substr($name, 0, 8 ) == "product_"){
$length = strlen($name) -8;
$item_id = substr($name,8 , $length);
$query = "SELECT *
FROM gallery2
WHERE gallery2.id =".escape_string($item_id). "";
$run_item = mysqli_query($conn,$query);
while($rows = mysqli_fetch_assoc($run_item)){
$vari = $rows['variante'];
$num = $rows['title'];
$id = $rows['id'];
$btn_add='<a class="btn btn-success" href="cart.php?plus='.$id.'"><i class="fa fa-plus fa-lg" aria-hidden="true" add_btn></i></a>';
$btn_remove = '<a class="btn btn-warning" href="cart.php?remove='.$id.'"><i class="fa fa-minus fa-lg" aria-hidden="true" remove_btn></i></a>';
$btn_delete='<a class="btn btn-default delete_btn" href="cart.php?delete='.$id.'"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>';
if($rows['variante'] < 1){
$vari="";
}else{
$vari = "-".$rows['variante'];
}
$product = '
<td style="width:100px; "><img src="../'.$rows['image'].'" style="width:90%;border: 1px solid black;"></td>
<td>'.$num.''.$vari.'</td>
<td style="width:15%;">
<select id="fabric" class="form-control selectpicker" required="" >
'. $fabric_options . '
</select>
</td>
<td>
<select id="size" class="form-control selectpicker" required style="width:80%;" >
<option value="50">50x50</option>
<option value="45">45x45</option>
</select>
</td>
<td>'.$value.'</td>
<td>R$</td>
<td>sub.total</td>
<td>
'.$btn_add.' '.$btn_remove.' '.$btn_delete.'
</td>
</tr>';
echo $product;
}
}
}
}
}
My LocalStorage script in checkout.php
<script >
$(function() {
if (localStorage.getItem('fabric')) {
$("#fabric option").eq(localStorage.getItem('fabric')).prop('selected', true);
}
$("#fabric").on('change', function() {
localStorage.setItem('fabric', $('option:selected', this).index());
});
});
</script>
<script >
$(function() {
if (localStorage.getItem('size')) {
$("#size option").eq(localStorage.getItem('size')).prop('selected', true);
}
$("#size").on('change', function() {
localStorage.setItem('size', $('option:selected', this).index());
});
});
</script>