toggle a dotted border when using jquery .toggleClass()

Question

I am trying to toggle a dotted border around a selected p tag when it is clicked on.

I formatted it using css script and then added a toggleClass() in jQuery, but when I ran my program, it didn't work. The dotted border doesn't appear.

Does anyone know how to make toggleClass() jQuery work? Thank you, in advance.

I will share my code below: https://codepen.io/monkeycrane2010/pen/poEXENr

HTML

<h1 style="text-align: center;">Baseline</h1>
<div id="draggable" class="ui-widget-content">
 
  <p>Text box to drag</p>
</div>

<button id="sheepbtn">+New </button>

<div id="one">Library Box</div>

<p>animal rocks!</p>

CSS

#draggable {
     width: 150px; height: 150px; padding: 0.5em; 
};

.selected {
  border: 10px dotted orange;
};

JavaScript

$(function () {
  $("#draggable").draggable();
  $("#draggable").resizable();

  $("#sheepbtn").on("click", function () {
    $("#one").append($("<p>tester</p>").draggable()); // CREATE NEW

    $("p").each(function (index) {
      // EACH
      $(this).attr("id", index);
      console.log(index + ": " + $(this).text());
    });

    $("p").on("click", function (event) {
      // CLASS
      $("h1").html(this.id);
      $(this).toggleClass("selected");
    });
  });
  
});

question from:https://stackoverflow.com/questions/65876146/toggle-a-dotted-border-when-using-jquery-toggleclass

Answer 1

Consider using a function like so:

function makeNewDrag(str, trg) {
  str = str != undefined ? str : "";
  trg = trg != undefined ? $(trg) : $("body");
  var n = $("<div>", {
    class: "draggable ui-widget-content"
  }).appendTo(trg);
  $("<p>").html(str).appendTo(n);
  n.draggable().resizable()
  return n;
}

This way, you can use it like makeNewDrag("Tester", $("#one")).

Here is a more full example. This applies a click callback to all p elements that are direct children to .draggable elements.

$(function() {
  function makeNewDrag(str, trg) {
    str = str != undefined ? str : "";
    trg = trg != undefined ? $(trg) : $("body");
    var n = $("<div>", {
      class: "draggable ui-widget-content"
    }).appendTo(trg);
    $("<p>").html(str).appendTo(n);
    n.draggable().resizable()
    return n;
  }
  $(".draggable").draggable().resizable();

  $("#sheepbtn").on("click", function() {
    makeNewDrag("Tester", $("#one"));
  });

  $("body").on("click", ".draggable > p", function() {
    $(this).toggleClass("selected");
  });
});

.draggable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

.selected {
  border: 10px dotted orange;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1 style="text-align: center;">Baseline</h1>
<div class="draggable ui-widget-content">
  <p>Text box to drag</p>
</div>

<button id="sheepbtn">+New</button>

<div id="one" class="draggable ui-widget-content">Library Box</div>

<p>animal rocks!</p>