I have a webpage with multiple rooms, these rooms contains banners that are dynamically created using a function that fetches data from the websocket. Everything is going god but since the data keeps changing, I clear the room everytime and rebuild the banners again using the passed data from the socket.
The banners can be dragged to another rooms and these also have a dropdown menu on the left, the issue I'm facing is the resetting of the room banners every second, which makes me unable to use the dropdown or drag function. The dropdown closes on it's own because the room is being build every sec.
JsFiddle: https://jsfiddle.net/ax9o478h/
In the JsFiddle it works fine but I think the issue is because of the websocket delaying the data by some time.
Help me with a better solution to fix this error.
P.S: again the fiddle works but in real application it fails and the described issue above occurs.
Here's the real server in action:
