How to change the quantity of the product if removed in PHP?

I have a form where I am inserting personal data and images. The user can add more than one image. Now when the user submits the form then I am inserting the data and images in the temporary table and creating a session for images that are as below.

$_SESSION['workimages']=$storeWorkImages;

I am getting the output which is correct (For example user added 3 images).

Array ( 
[0] => 1381658980.jpeg 
[1] => 211907337.png 
[2] => 266964890.jpg 
) 

Till now, The User data in a temporary table. I don’t have any issues here.

Now What I am doing is, I am displaying all the images on the checkout page where the user can view the images for confirmation. So I use the below code.

<?php if(isset($_SESSION['workimages'])){?>
<form method="post" id="checkout" name="checkout" action="#" autocomplete="off">
  <?php  foreach($_SESSION['workimages'] as $workimages){?>
  <ul>
    <li>
      <img src="assets/images/uploads/<?php echo $workimages;?>" alt="" class="workimg">
      <a href="javascript:void(0);" class="disabledme btn_workremove">Remove</a>
      <a href="javascript:void(0);" class="disabledme btn_workrestore">Restore</a>
    </li>
    <?php }?>
  </ul>
  <div class="calculateWrap">
    <label>quantity</label>
    <input type="text" value="<?php echo count($_SESSION['workimages']);?>" name="qty" id="qty">
    <label>Amount</label> $
    <input type="text" name="amount" id="totalamt" value="1">
  </div>
  <input type="hidden" name="user_id" value="1"> <!--1 is for testing-->
  <input type="submit" name="submit" value="Proceed to pay">
</form>
<?php }?>

I am using the below script for remove and restore.

Note: The Below script is used only for adding the class and display the remove and restore the text. It is not completely removing from the session.

I don’t want to remove from the session because the user can reactive the image again.

$(function() {   
  $(".btn_workremove").click(function() {  
    $(this).parent().addClass("disabledimage");  
     $('.disabledimage .btn_workrestore').addClass("d-block"); 
  });

  $(".btn_workrestore").click(function() {  
    $(this).parent().removeClass("disabledimage"); 
    $(this).removeClass("d-block"); 
    $('.disabledimage .btn_workremove').addClass("d-block"); 
  });

});

Check the below image. I am getting this output.

Note: The second image removed but still I want to show it to the user.

Now If I click on Proceed to pay button then I am inserting the all the data in the real table(I am sharing only checkout query here)

$qty = validate_data($_POST['qty']);
$amount = validate_data($_POST['amount']);
$user_id = validate_data($_POST['user_id']);

$sql = "INSERT INTO `tbl_checkout`(`qty`, `amount`, `user_id`) VALUES (:qty, :amount, :user_id)";
$stmt = $pdo - > prepare($sql);
$stmt - > execute(['qty' => $qty,
  'amount' => $amount,
  'user_id' => $user_id
]);

Now my main issue is, I am getting 3 qty instead of 2. I removed second image but still giving me 3 qty.

Would you help me out with this issue?

Answer

You are getting the quantity by counting the amount of images is the session variable

<input type="text" value="<?php echo count($_SESSION['workimages']);?>" name="qty" id="qty">

The session variable is a server-side variable, you cannot change this with javascript. I would suggest using jQuery to remove or add 1 to the quantity when remove or restore is clicked.

example:

$(function() {
  $(".btn_workremove").click(function() {
    $(this).parent().addClass("disabledimage");
    $('.disabledimage .btn_workrestore').addClass("d-block");
    var qty = parseInt($('#qty').val())
    $('#qty').val(qty - 1) // <---- remove 1 from quantity
  });

  $(".btn_workrestore").click(function() {
    $(this).parent().removeClass("disabledimage");
    $(this).removeClass("d-block");
    $('.disabledimage .btn_workremove').addClass("d-block");
    var qty = parseInt($('#qty').val())
    $('#qty').val(qty + 1) // <---- add 1 to quantity
  });

});