Unable to change the dragged item on drop

I am new to jQuery. I have a requirement of drag and drop where i got '3 draggable div' with id 'parent1, parent2 and parent3' to be dropped in a "container div drop-parent".

Scenario: When i drag the div with id 'parent1' on container div 'drop-parent' it get dropped but when i choose 'parent 2' div to drop it isn't able to replace the div 'parent1' and to come at its inital position. Please refer below JSBin link for same [click here]

$(".child").draggable({
        revert: "invalid",
        containment: ".drag_drop_container"
    });

    $('.drop-parent').droppable({
        accept: ".drag-parent > .child",
        drop: function(event, ui) {
            Dropped($(this), ui.draggable.click());
        }
    });
    $('.drag-parent').droppable({
        accept: function(draggable) {
            if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
                return true;
            }
        },
        drop: function(event, ui) {
            Reverted($(this), ui.draggable.click());
        }
    });
    function Dropped($this, $item) {
        $item.css({'left': '0px', 'top': '0px'});
        $this.droppable("disable").css('opacity',0.9);;
        if($item.parent().hasClass('drop-parent')) {
            $item.parent().droppable("enable");
        } else {
            $('.text-input').val($item.attr('data-id'));
        }
        $this.append($item);
        $this.sortable();
    }
    function Reverted($this, $item) {
        $item.css({'left': '0px', 'top': '0px'});
        $item.parent().droppable("enable");
        $this.append($item);
        $('.droped_val').val('');
    }

.drop-parent {
    //border: 1px solid red!important;
    /* background-color: red; */
    //width: 640px; /*can be in percentage also.*/
    height: 42px;
    width: 100px;
    //margin: 0 auto;
    left:-4px;
    //padding: 10px;
    top:184px;
    position: relative;
}
.dragbody {
    //border: 1px solid blue!important;
    /* background-color: red; */
    //width: 281px;
    //position: relative;
    //height: 53px;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
    <script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
    <div class="cards">
        <table align="center" class="Table1">
            <tr>
                <td>
                    <div class="drag-parent" id="parent1">
                        <div class="child" data-id=1><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png"/></div>
                    </div>
                </td>
                <td>
                    <div class="drag-parent" id="parent2">
                        <div class="child" data-id=2><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png"/></div>
                    </div>
                </td>
                <td>
                    <div class="drag-parent" id="parent3">
                        <div class="child" data-id=3><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png"/></div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div align="center" class="dragbody">
        <div align="center" class="drop-parent">
        </div>
        <img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/>

    </div>
</div>
</body>
</html>

Solution

I've edited the Dropped() function so that it moves all old elements that where on the body back to their parent and then adds the new one.

$(".child").draggable({
  revert: "invalid",
  containment: ".drag_drop_container"
});

$('.drop-parent').droppable({
  accept: ".drag-parent > .child",
  drop: function(event, ui) {
    Dropped($(this), ui.draggable.click());
  }
});
$('.drag-parent').droppable({
  accept: function(draggable) {
    if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
      return true;
    }
  },
  drop: function(event, ui) {
    Reverted($(this), ui.draggable.click());
  }
});

function Dropped($this, $item) {
  $item.css({
    'left': '0px',
    'top': '0px'
  });
  if ($item.parent().hasClass('drop-parent')) {
    $item.parent().droppable("enable");
  } else {
    $('.text-input').val($item.attr('data-id'));
  }
  for (i = 0; i < $this.children().length; i++) {
        $oldElement = $($this.children()[i]);
    $("#parent" + $oldElement.data("id")).append($oldElement);
  }
  $this.append($item);
  $this.sortable();
}

function Reverted($this, $item) {
  $item.css({
    'left': '0px',
    'top': '0px'
  });
  $item.parent().droppable("enable");
  $this.append($item);
  $('.droped_val').val('');
}

.drop-parent {
    //border: 1px solid red!important;
    /* background-color: red; */
    //width: 640px; /*can be in percentage also.*/
    height: 42px;
    width: 100px;
    //margin: 0 auto;
    left:-4px;
    //padding: 10px;
    top:184px;
    position: relative;
}
.dragbody {
    //border: 1px solid blue!important;
    /* background-color: red; */
    //width: 281px;
    //position: relative;
    //height: 53px;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
    <script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
  </head>

  <body>
    <div class="drag_drop_container">
      <div class="cards">
        <table align="center" class="Table1">
          <tr>
            <td>
              <div class="drag-parent" id="parent1">
                <div class="child" data-id=1>
                  <img data-parent-id="1" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png" />
                </div>
              </div>
            </td>
            <td>
              <div class="drag-parent" id="parent2">
                <div class="child" data-id=2>
                  <img data-parent-id="2" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png" />
                </div>
              </div>
            </td>
            <td>
              <div class="drag-parent" id="parent3">
                <div class="child" data-id=3>
                  <img data-parent-id="3" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png" />
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div align="center" class="dragbody">
        <div align="center" class="drop-parent">
        </div>
        <img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" />

      </div>
    </div>
  </body>

</html>