Why doesn't my code work? I am really getting frustrated with this. In my theme I have a script file that is working. I am adding a new function to deal with some div but nothing happen. Cleared the cache...tried different things...nothing is working.

The following code is working perfectly fine when tested in jsfiddle, but in my site...nothing at all.

html code output:

&lt;div class="cal-full"&gt;
  &lt;a href="/race/charlton-park-winter-monster-race-10k-2016-11-12"&gt;title&lt;/a&gt;
&lt;/div&gt;
&lt;div id="cal-events-tooltip-4734" class="cal-events-tooltip cal-events-tooltip_hide"&gt;
  &lt;h4 class="cal-entry-title summary"&gt;&lt;a href="/race/event"&gt;title&lt;/a&gt;&lt;/h4&gt;
  &lt;div class="cal-event-body"&gt;
     &lt;div class="cal-event-thumb"&gt;
     logo
     &lt;/div&gt;
      &lt;div class="cal-event-description"&gt;&lt;p&gt;dsfdsfsdfsdfsdfsdfsdfdfs&lt;/p&gt;    &lt;/div&gt;  
     &lt;span class="events-arrow"&gt;&lt;/span&gt;
  &lt;/div&gt;




in my js script:

$(document).ready(function () {

$(".cal-full").mouseover(function() {

        $(this).siblings('.cal-events-tooltip').addClass('cal-events-tooltip_show');
    $(this).siblings('.cal-events-tooltip').removeClass('cal-events-tooltip_hide');

    });

$(".cal-full").mouseout(function() {

        $(this).siblings('.cal-events-tooltip').removeClass('cal-events-tooltip_show');
    $(this).siblings('.cal-events-tooltip').addClass('cal-events-tooltip_hide');

    });


});

Any help will be appreciated.
Thanks!
You can't trust JsFiddle when it comes to running Javascript in Drupal, because Drupal uses the Immediately Invoked Function Expression (IIFE), a well known pattern in JS. Raw code you supply the fiddle with may not always work in the application.

See managing JS in Drupal. Your code needs to be wrapped first. My guess? You have console errors regarding $ is undefined.

(function ($, Drupal) {
  Drupal.behaviors.myCustomBehavior = {
    attach: function (context, settings) {
      $(".cal-full").mouseover(function() {

        $(this).siblings('.cal-events-tooltip').addClass('cal-events-tooltip_show');
    $(this).siblings('.cal-events-tooltip').removeClass('cal-events-tooltip_hide');

    });

$(".cal-full").mouseout(function() {

        $(this).siblings('.cal-events-tooltip').removeClass('cal-events-tooltip_show');
    $(this).siblings('.cal-events-tooltip').addClass('cal-events-tooltip_hide');

    });
    });
    }
  };
})(jQuery, Drupal);


If this is Drupal 8, you will also need to require jQuery and related dependencies from your module or theme, so they are attached to the page before your script.