Trying to make these divs not reset when I add a new one with jquery

Question

I tried changing the keyup part of the code to button , and I also tried some code to get the drag and drop element to keep its position in the cookie, but to no avail. When I change an empty tag to a finished one, it repeats the previous lines each time. Any help would be greatly appreciated.

jsFiddle for source code

jsFiddle for my button click attempt

HTML

 <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <textarea></textarea> <div id="opt"></div> 

CSS

 d { position: relative; left: 0; top: 0; width: 60px; height: 60px; background: #ccc; float: left; font-family: arial; font-size: 10px; } 

Javascript

 $(document).ready(function() { $("textarea").keyup(splitLine); function splitLine() { $("#opt").empty(); var lines = $("textarea").val().split(/\n/g); for (var i = 0; i < lines.length; i++) { var ele = $("<d>"); ele.html(lines[i]); $("#opt").append($(ele).draggable()); } } }); 

Answer 1

I think you should not delete all of your <d> and start all over again. I made some changes to the code to reuse the old <d> in order to maintain its position

 $(document).ready(function () { $("textarea").keyup(splitLine); function splitLine() { //$("#opt").empty(); var lines = $("textarea").val().split(/\n/g); for (var i = 0; i < lines.length; i++) { var ele; if ($("d:eq(" + i + ")").get(0)) { ele = $("d:eq(" + i + ")"); ele.html(lines[i]); } else { ele = $("<d>"); ele.html(lines[i]); $("#opt").append($(ele).draggable()); } } } });