I have images uploaded to my webpage, but I need to add them to 4 different carousels: enter image description here. When I add them, the carousel_id for each image is correctly read, but I want to implement a drag-and-drop feature connected to the database so that I can update the order of the images after they are dropped, allowing me to manipulate them. The challenge is that this needs to work individually for all 4 carousels.

I tried using a logic with 1024 that I saw in a tutorial, where the first image was assigned a value of 1024, the next one double that, 2048, and so on. When attempting to move an image between those two, the operation (1024+2048)/2 was used for the middle value, and that value was then stored in the database. However, this didn’t work, and it didn’t update the carousel order correctly on the webpage.