How to remove a class from a clone only with Draggable and Droppable jQuery?

Question

I'm currently trying to remove a class from a nested div inside of a li that is draggable. The options that I'm trying are removing the class from the original li as well. Would anyone have any insight?

jQuery

        $(function () {
            $(".drag li").each(function () {
                $(this).draggable({
                    cursor: "move",
                    revert: "invalid",
                    helper: "clone"                        
                });
            });     
        //Droppable function
        $(".droppable").droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var targetElem = $(this).attr("id");
                $(ui.draggable).clone().appendTo(this).addClass("form-btn-wide");
                $("#test .elementHidden").removeClass("elementHidden");
            }

            //Sorting function
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function () {
                $(this).removeClass("ui-state-default");
            },
            over: function () {
                removeIntent = false;
            }, //Remove function
            out: function () {
                removeIntent = true;
            },
            beforeStop: function (event, ui) {
                if (removeIntent == true) {
                    ui.item.remove();
                }
            }

            })         
        });

You can see the $("#test .elementHidden").removeClass("elementHidden"); is what I've tried, but to no avail.

Here's the example that I'm trying to remove the '.elementHidden' class from:

<ol id="twocol" class= "drag">
 <li id="test" class="btn form-btn draggable"><span><i class="fa fa-fw fa-header"></i> Header</span>
 <div class="elementHidden"><input type="button" id="reset" class="btn btn-default" value="Cancel"></div>
</li>
</ol>

Answer 1

Providing a more complete example may help get an answer faster.

Working example: https://jsfiddle.net/Twisty/gyy2kqqz/

JavaScript

$(function() {
  $(".drag li").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
  });
  //Droppable function
  $(".droppable").droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        var dropId = ui.draggable.attr("id");
        var targetCount = $(this).find("[id*='clone']").length;
        var $dropElemClone = ui.draggable.clone();
        $dropElemClone
          .attr("id", dropId + "-clone-" + (targetCount + 1))
          .appendTo(this)
          .addClass("form-btn-wide")
          .find(".elementHidden")
          .removeClass("elementHidden");
      }
      //Sorting function
  }).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
      $(this).removeClass("ui-state-default");
    },
    over: function() {
      removeIntent = false;
    }, //Remove function
    out: function() {
      removeIntent = true;
    },
    beforeStop: function(event, ui) {
      if (removeIntent == true) {
        ui.item.remove();
      }
    }
  })
});

You will not need to use .each(); just use the proper selector and .draggable() will be applied to all elements in the selector.

Using clone is a double edged sword sometimes. You can clone an element fast, but you clone all of it. So before you append it back, you may want to ensure it has a unique id attribute.

It's often good practice to store your clone to a variable. This makes it's easier to work with later.

Lastly, to remove the class, we need to first select that element that has that class. Using .find() is the easiest way to do this. We expect it to be an element of this clone,we find it, and can then remove the class.