JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a href="#" id="toggleboth">Toggle</a>

<div class="togglefade" id="jquery">Jquery</div>
<div class="togglefade" id="vanilla">Vanilla</div>
<div class="togglefade" id="not-faded">Not Faded</div>

CSS

.togglefade {
  background: black;
  padding: 20px;
  margin: 10px;
  border-radius: 4px;
  text-align: center;
  color: white;
}

JavaScript

var $el_jquery = $("#jquery");

var el_vanilla = $("#vanilla")[0];

el_vanilla.style.transition = 'opacity 5s';

$("a#toggleboth").on("click", function(ev) {
  ev.preventDefault();

  $el_jquery.stop().fadeToggle(5000, "linear");

  const {
    opacity
  } = el_vanilla.ownerDocument.defaultView.getComputedStyle(el_vanilla, null);
  if (opacity === '1') {
    el_vanilla.style.opacity = '0';
  } else {
    el_vanilla.style.opacity = '1';
  }
});