JQuery draggable element background color

I'm trying to make a statement in JQuery that will change draggable element background (but only the one 'in use') if classes of it and droppable element won't match. I tried to add class and define style, but right now background of the droppable div changes. Part of my code:

$(function() {
  $("#answers li").draggable({
    revert: "invalid"
  });
  
  $("#box div").droppable({
    drop: function(event, ui) {
      var dropped = $(this).attr('class').split(' ')[0];
      if (ui.draggable.attr('class').includes(dropped)) {
      } else {
        $(draggable).addClass("error")
      }
    }
  });
});

.error {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<li class="london">
  <p> Piccadilly Circus </p>
</li>
<div id="box">
  <div class="paris">
    <p> PARYŻ </p>
  </div>