Writing related and multiple functions
<p><img src="https://i.imgur.com/KZQ1Sjs.png" /></p>

<p>I write code for:</p>

<p>(1)</p>

<pre><code>// Follow Button click action
$('body').on('click' , '.btn-follow', function() { 
  $(this).removeClass('btn-follow').addClass('btn-following');
  $(this).text('Following');

  // call followingHover function to get the action of that button
  followingHover();
});
</code></pre>

<p>(2)</p>

<pre><code>// Hover on Following Button
function followingHover() {
  $('.btn-following').hover(
    function() {
      $(this).addClass('btn-unfollow');
      $(this).text('Unfollow');
    }, function() {
      $(this).removeClass('btn-unfollow');
      $(this).text('Following');
    }
  );
};

followingHover();
</code></pre>

<p>(3)</p>

<pre><code>// Following Button click action
$('body').on('click', '.btn-following', function() { 
  $(this).removeClass('btn-following').addClass('btn-follow');
  $(this).text('Follow');
});
</code></pre>

<p>But, the problem is I can't maintain these functions together. So, inside one function other function is calling in wrong way. How can I make these set of  functions well-written? Will you please help me?</p>

<p><a href="https://jsfiddle.net/00py6vc2/3/" rel="nofollow noreferrer">Fiddle Demo For testing</a></p>