Requesting some general direction for website function

I am creating my own eccommerece website and would like some advice how to approach creating some of the functions on my eccommerece site.

I am novice to web development. I have already implemented some features on my site however I am now stuck and need some advice or direction how to apparoach a particular function.

Here is a breakdown of what my idea for my ecommerece website so far.
[U]Item Selector Menu [/U]
Location: On the left side of the page
My current thought is an accrodian style menu.
First it will list only the category of items, once an category is clicked it will display the list of items in that category.
For each item there is a picture, description and add to cart button.

[U]Item display grid[/U]
Location: Middle of page
In the middlle is a grid. I have not decided size yet but for example an 4×6 grid.
The gird displays exactly what is the customer ordering so what ever is shown on the gird is in the shopping cart.
If more than one quantity of the product is to be ordered than it will take up the exact amount on grid.

[U]Function[/U]
Customer clicks on add to cart button from the item selector menu, the item is added to cart and the picture shows up in one of the spots in the item display grid.
Once the item is added on grid, the user can directly remove the item from the grid, which at the same time removes product from cart.
In addition, from the item in grid, the customer has the option to add more of this product. The product will be added to another space on the grid and shopping cart.
Another option that I want implemented, but doesnt have to be now, is user can aslo drag the picture of object on the the grid, therefore it would be same function as clicking add to cart button.

[U]Status[/U]
I have finished the a design of a accrodian style item selector menu and made a box where I can drag and drop the image or when I click add to cart image will show up in box.

I need some advice on how to implement the item display gird where I cannot add more items than the number of spaces in grid.
Also when the item is displayed on gird, I need to implement tthe fucntion to be able to remove item from gird, at the same time removing item from cart.

I am think about using snipcart where I just need to integrate the buy button to my website. Currently clicking on the buy button, add the item to snipcart’s cart and I made it add image of item to box.

Even some general advice would be helpfuI, I dont mind investigating further but would like some direction.

Thank You.

Also in #HTML _↴