[
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material1.png');\">Raw Material 1</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material1.png');\"></div>"
  },
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material2.png');\">Raw Material 2</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material2.png');\"></div>"
  },
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material3.png');\">Raw Material 3</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/raw-material3.png');\"></div>"
  },
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/element1.png');\">Element 1</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/element1.png');\"></div>"
  },
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/element2.png');\">Element 2</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/element2.png');\"></div>"
  },
  {
    "search": "<div class=\"draggable\" style=\"background-image: url('path/to/element3.png');\">Element 3</div>",
    "replace": "<div class=\"draggable\" style=\"background-image: url('path/to/element3.png');\"></div>"
  },
  {
    "search": "<div class=\"container\" id=\"chemical-container\"></div>",
    "replace": "<div class=\"container\" id=\"chemical-container\">\n    <div class=\"draggable\" style=\"background-image: url('path/to/chemical1.png');\">Chemical 1</div>\n    <div class=\"draggable\" style=\"background-image: url('path/to/chemical2.png');\">Chemical 2</div>\n    <div class=\"draggable\" style=\"background-image: url('path/to/chemical3.png');\">Chemical 3</div>\n    <!-- Add more draggable elements here -->\n</div>"
  }
]