How to make multiple elements with specific CSS with a button click that are all draggable

[Smyles]

I'm looking at this tutorial, and I'm trying to learn how to create a task management website for myself. I want to create task elements with specific rules/elements, such as being able to change the size, colour, font, a grouping system for tasks(nesting them under an object with a specific name and colour, also creatable by the user). I will figure out most of these other problems later, but for now I want to have a button on the website that creates a basic task element that I can drag around. However, I want to be able to create multiple basic task elements, and I want to be able to drag them all within a certain area(white board type thing). I get that there's multiple websites or programs that can already do this, but I want to get into web development and get some knowledge by doing a project I find useful to me. I am not sure how to get the dragElement function to do that for multiple elements as the way it's done gets a single element of a single id, but from what I have seen, document.getElementsByClassName() wouldn't work either as trying to drag any of them would drag them all I think.

This is the tutorial I was following.

https://www.w3schools.com/howto/howto_js_draggable.asp

[shaili_shah]

Hi, refer this:http://jsfiddle.net/T68Fn/

Hope it helps.