Apply jquery tabs to markdown

Question

I am trying to make a developer docs page and want to convert some code blocks written in GFM to a tabbed panel using jQuery UI - Tabs. The site is running on wordpress with a github markdown converter to generate the content for this page.

Ideally aiming for a tabbed/switch like this

1st issue: How do I wrap a div around each section of code, along with adding a class to said div using markdown so I can apply the jquery tabs?

2nd issue: When I get to this step - making the tabs so that when you change the code language on one tab it automatically toggles the change for all other tabbed code areas?

What the markdown looks like currently:

#### Heading of section
Some explanation text

```objc (Theres syntax highlighting so this assigns it a class of 'objc')
    xxxxxxxxxxxxxxxx
```
```java
    xxxxxxxxxxxxxx
```
```swift
    xxxx
```

The current output

<h2>Heading of section</h2>
<p>Some explanation text</p>
<pre>
    <code class="objc">
    xxxxxxxxxxxxx
    </code>
</pre>
<pre>
    <code class="java">
    xxxxxxxxxxxxx
    </code>
</pre>
<pre>
    <code class="swift">
    xxxxxxxxxxxxx
    </code>
</pre>

Desired output

<h2>Heading of section</h2>
<p>Some explanation text</p>
<div class="tabs">
    <ul>
        <li><a href=".objc">Objective C</a></li>
        <li><a href=".java">Java</a></li>
        <li><a href=".swift">Swift</a></li>   
    </ul>
    <pre>
        <code class="objc">
        xxxxxxxxxxxxx
        </code>
    </pre>
    <pre>
        <code class="java">
        xxxxxxxxxxxxx
        </code>
    </pre>
    <pre>
        <code class="swift">
        xxxxxxxxxxxxx
        </code>
    </pre>
</div>

Any help would be much appreciated! :)