Javascript issue on switching html tabs, content is dissapear

I have EmojioneArea plugin for inserting emojys in <textarea> but when i switch my html tabs the emoji plugin is gone.. I don't know why.. I write the issue to the plugin developers and they sayed that the plugin works ok and the proble is on the javascript tabs. Some help needed thanks!

Html:

<ol class="timeline clearfix">
                <li class="spine"></li><br>
                <li class="left"></li>
                       <div class="boxsh unit" id="tabs">
                         <span class="ajax_indi"> 
                        <!-- Units -->

                        <div class="boxpost tabs1 actionUnits" id="tabs-1">

                            <form id="npost" name="npost">
                                <p class="formUnit" id="Status"> <i class="active"></i>
                                    <textarea class="emojis click url" name="message" placeholder="Write your status here..." id="message" cols="30" rows="3"></textarea>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="npost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>

                        </div>
                        <div class="boxpost tabs2 actionUnits" id="tabs-2">

                            <form id="picpost" name="picpost">
                                    <p class="formUnit"> <i class="active_pic"></i>
                                     <textarea class="emojis1 click" name="message" placeholder="Photo Description..." id="pmessage" cols="30" rows="3"></textarea> 
                                    <input type="hidden" name="pic_url" id="pic_url">
                                    <button class="btn btn-xs btn-danger" type="button" id="upload_pic">Insert picture</button><span id="statuss"></span>
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a id="#tabs1" href="#tabs-1"><i class="icon  icon-status"></i>Status</a></li>
                                       <li><a id="#tabs-2" href="#tabs-2"><i class="icon  icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon  icon-video"></i>Video</a></li>
                                          <input class="pull-right uibutton confirm fb_submit" type="button" title="picpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                                <p id="files"></p>
                            </form>
                        </div>
                        <div class="boxpost tabs3 actionUnits" id="tabs-3">

                            <form id="vidpost" name="vidpost">
                                <p class="formUnit" id="Status"> <i class="active_vid"></i>
                                    <textarea name="message" class="emojis2 click" placeholder="Video description..." id="vmessage" cols="30" rows="3"></textarea>
                                    <input type="text" name="y_link" style="width:100%;border-radius: 4px;height: 35px;" id="y_link" placeholder="Youtube Url - www.youtube.com/watch?v=rdmycu13Png">
                                <ul class="controls clearfix" id="tabs">
                                    <li class="post">
                                       <li><a href="#tabs-1"><i class="icon icon-status"></i>Status</a></li>
                                       <li><a href="#tabs-2"><i class="icon icon-photo"></i>Photo</a></li>
                                       <li><a href="#tabs-3"><i class="icon icon-video"></i>Video</a></li>
                                         <input class="pull-right uibutton confirm fb_submit" type="button" title="vidpost" value="Post">
                                    </li>
                                </ul>
                                </p>
                            </form>
                        </div>
            </ol>

Javascript script for tabs:

      $(document).ready(function() {
        $('#tabs div').hide();
        $('#tabs div:first').show();
        $('#tabs ul li:first').addClass('active');
        $('#tabs ul li a').click(function () {
            $('#tabs ul li').removeClass('active');
            $(this).parent().addClass('active');
             $('#tabs div').hide();
            $($(this).attr("href")).show();

            return false;
        });

// EmojionArea plugin
$('#message').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#pmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });
$('#vmessage').emojioneArea({
    pickerPosition: "bottom",
    filtersPosition: "bottom",
    tones: false,
    autocomplete: false,
    autoHideFilters : true,
    useSprite       : true,
    inline: true
        });

Solution

Alright. here is a working fiddle. I'm not even sure how to explain exactly what was wrong, but I want to give some feedback.

First off: I suspect your somewhat new at this, so good on ya for learning.

Your HTML markup was problematic
1. You had multiple uses of the same ID on different elements. That's a no-no. ID's can only be used once per page.
2. UL tags cannot be used inside P tags, and LI tags cannot be direct children of other LI tags.
3. You seemed to have multiple instances of elements that weren't actually doing anything.
4. You had way too many unnecessary identifiers. If selectors aren't being used for something, get rid of them. It makes code harder to work with and more difficult to fix when it breaks.

You had a lot of repetition in your javascript. There were things that were being added and removed and added back and being done multiple times. This is what I finally got it pared down to after I figured it out:

$(document).ready(function () {

    $("#message,#pmessage,#vmessage").emojioneArea({
        inline: true,
        hideSource: true,
        pickerPosition: "right",
        tonesStyle: "bullet",
    });

    $('li a').on('click', function (e) {
        if ($(this).is('.active')) {
                e.preventDefault();
            return;
            }
       var activeTab = $(this).attr('href');
        var newTab = $(activeTab);
        var newTabAnchor = newTab.find('a').filter(function (e) {
            return this.href.replace('https://fiddle.jshell.net/_display/','') === activeTab;
        });
        $('.active').removeClass('active');
        newTab.add(newTabAnchor).addClass('active');
    });

});

That basically the long and the short of it. I would advise you to always keep your indentation and alignment on point. It is very difficult to debug code that is not easy to read.

Good luck.