JQuery make added element draggable and save position after dynamically adding

Question

The following code works to make already created elements draggable / resizable and save to localStorage:

var positions = JSON.parse(localStorage.positions || "{}");
$(function () {

 //store coordinates of items
  var d = $("[id=draggable]").attr("id", function (i) {
    return "draggable_" + i;
  });
  $.each(positions, function (id, pos) {
    $("#" + id).css(pos);
  });

  d.draggable({
    containment: "#containment-wrapper",
    stack: ".draggable",
    scroll: false,
    stop: function (event, ui) {
      positions[this.id] = ui.position;
      localStorage.positions = JSON.stringify(positions);
    }
  });

  //resizable items
  $(".resizable").resizable({
    minHeight: 50,
    minWidth: 50,
    maxHeight: 500,
    maxWidth: 500,
    aspectRatio: true
  });
});

However, I want to add and remove elements dynamically, with the drag / resize / localStorage properties. To add the HTML element, I am currently using append:

  $("#htmlexample1").click(function () {
    $("#containment-wrapper").append(
      '<div id="draggable" class="ui-widget-content draggable"><div class="resizable"><img src="example1.svg" alt="Example1"></div><div class="drag-bottom">Example 1</div></div>'
    );
  });

  $("#htmlexample2").click(function () {
    $("#containment-wrapper").append(
      '<div id="draggable" class="ui-widget-content draggable"><div class="resizable"><img src="example2.svg" alt="Example2"></div><div class="drag-bottom">Example 2</div></div>'
    );
  });

However I understand the previous code is not being applied to this newly created element. I may have hundreds of items that get dynamically added (like from tool menu) so need concise approach if possible.

How do I apply my localStorage and draggable / resizable properties to each new element that is created?

EDIT: Tried a suggested solution- I am sure I am missing something as this maintains the original functionality, but does not save new items when page is refreshed. What to change to keep new items in local storage?

var positions = JSON.parse(localStorage.getItem('positions'));
$(function () {
  var d = $("[id=draggable]").attr("id", function (i) {
    return "draggable_" + i;
  });
  $.each(positions, function (id, pos) {
    $("#" + id).css(pos);
  });
  d.draggable({
    containment: "#containment-wrapper",
    stack: ".draggable",
    scroll: false,
    stop: function (event, ui) {
      positions[this.id] = ui.position;
      localStorage.setItem('positions', JSON.stringify(positions));
    }
  });
});

Answer 1

Maybe this will help you:

https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

As I see don't do

localStorage.positions = JSON.stringify(positions);

Do for setting an Item

var positions = JSON.stringify(positions);
localStorage.setItem('positions', positions);

Or

localStorage.setItem('positions', JSON.stringify(positions));

For getting the Item do

var positions = JSON.parse(localStorage.getItem('positions'));