here's one way to handle basic toggling tabs

tabs.css

.tab { display:none; background: #ccc; padding:10px; }
.tab.show { display: block; }

tabs.html

<div class="codeeditor">
    <ul class="buttons">
        <li class="button" data-lang="html">HTML</li>
        <li class="button" data-lang="css">CSS</li>
    </ul>
    <div class="code-editor">
        <pre class="tab show html-code" >hello i am html</pre>
        <pre class="tab css-code">hi i'm css</pre>
    </div>
</div>

<div class="codeeditor">
    <ul class="buttons">
        <li class="button" data-lang="html">HTML</li>
        <li class="button" data-lang="css">CSS</li>
    </ul>
    <div class="code-editor">
        <pre class="tab show html-code" >hello i am html</pre>
        <pre class="tab css-code">hi i'm css</pre>
    </div>
</div>

tabs.js

  $('.codeeditor .button').on({
    'click': function(e) {
        
        e.preventDefault();
        
       var $this = $(this),
           lang = $this.attr('data-lang'),
           $block = $this.parents('.codeeditor');
           
       var $match = $block.find('.' + lang + '-code');
      
          $match.siblings().removeClass('show');
          $match.addClass('show');
        
    }
  });