title: jQuery: on click hide specific div
body: <p>On this <a href="https://einrichtungstool.rosental-nexxt.ch/" rel="nofollow noreferrer">website</a> I am trying to hide some elements on click. </p>
  
  <p>As you can see I have some objects on the left that can me dragged and dropped on the right and on click they are "hidden". </p>
  
  <p>It happens that if I put the same element 2 times both are hidden. I just need that just the selected elements is hidden on click.</p>
  
  <p>This is what i tried JS:</p>
  
  <pre><code> $(document).ready(function(){
  //Counter
  counter = 0;
  //Make element draggable
  $(".drag").draggable({
      helper:'clone',
      containment: 'frame',
  
      //When first dragged
      stop:function(ev, ui) {
          var pos=$(ui.helper).offset();
          objName = "#clonediv"+counter
          $(objName).css({"left":pos.left,"top":pos.top});
          $(objName).removeClass("drag");
  
  
          //When an existiung object is dragged
          $(objName).draggable({
              containment: 'parent',
              stop:function(ev, ui) {
                  var pos=$(ui.helper).offset();
                  console.log($(this).attr("id"));
                                console.log(pos.left)
                  console.log(pos.top)
              }
          });
      }
  });
  //Make element droppable
  $("#frame").droppable({
      drop: function(ev, ui) {
          if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
              counter++;
              var element=$(ui.draggable).clone();
              element.addClass("tempclass");
              $(this).append(element);
              $(".tempclass").attr("id","clonediv"+counter);
              $("#clonediv"+counter).removeClass("tempclass");
  
              //Get the dynamically item id
              draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
              itemDragged = "dragged" + RegExp.$1
              console.log(itemDragged)
  
              $("#clonediv"+counter).addClass(itemDragged);
          }
  $(".drag").draggable({
    revert: 'invalid'
  });
  $(".dragged1").addClass("deleted-1");
  $(".deleted-1").click(function(){
    $(".dragged1").hide();
  });
  $(".dragged2").addClass("deleted-2");
  $(".deleted-2").click(function(){
    $(".dragged2").hide();
  });
  $(".dragged3").addClass("deleted-3");
  $(".deleted-3").click(function(){
    $(".dragged3").hide();
  });
  $(".dragged4").addClass("deleted-4");
  $(".deleted-4").click(function(){
    $(".dragged4").hide();
  });
  $(".dragged5").addClass("deleted-5");
  $(".deleted-5").click(function(){
    $(".dragged5").hide();
  });
  $(".dragged6").addClass("deleted-6");
  $(".deleted-6").click(function(){
    $(".dragged6").hide();
  });
  $(".dragged7").addClass("deleted-7");
  $(".deleted-7").click(function(){
    $(".dragged7").hide();
  });
  $(".dragged8").addClass("deleted-8");
  $(".deleted-8").click(function(){
    $(".dragged8").hide();
  });
      }
  });
  });
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="options"&gt;
          &lt;div id="drag1" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag1 --&gt;
        &lt;div id="rotate_btn_1" class="rotate"&gt;&lt;/div&gt;
          &lt;div id="drag2" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag2 --&gt;
        &lt;div id="rotate_btn_2" class="rotate"&gt;&lt;/div&gt;
          &lt;div id="drag3" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag3 --&gt;
        &lt;div id="rotate_btn_3" class="rotate"&gt;&lt;/div&gt;
          &lt;div id="drag4" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag4 --&gt;
        &lt;div id="rotate_btn_4" class="rotate"&gt;&lt;/div&gt;
          &lt;div id="drag5" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag5 --&gt;
        &lt;div id="rotate_btn_5" class="rotate"&gt;&lt;/div&gt;
          &lt;div id="drag6" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag6 --&gt;
        &lt;div id="rotate_btn_6" class="rotate"&gt;&lt;/div&gt;
      &lt;div id="drag7" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag7 --&gt;
        &lt;div id="rotate_btn_7" class="rotate"&gt;&lt;/div&gt;
      &lt;div id="drag8" class="drag"&gt;&lt;/div&gt; &lt;!-- end of drag8 --&gt;
        &lt;div id="rotate_btn_8" class="rotate"&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- end of options --&gt;
      &lt;div id="frame"&gt;
      &lt;input id="undo" type="button"&gt;
      &lt;/div&gt;&lt;!-- end of frame --&gt;
  &lt;/div&gt;&lt;!-- end of wrapper --&gt;
  </code></pre>
  
  <p>How can I hide just one div?</p>