Replace between 2 div multiple times

I want to replace between 2 divs multiple times, but when I replace it 1 time and click on the button again its shows both of them.

I try to describe it: When I click on "Like" button its switch to liked and counter work (ajax work also), but when I click on the "Dislike" button after that, the button not replaced its just show me both of them.

Code:

JS:

 <script>
    function likethis(likeid)
    {
        $('#dealid-' + likeid).html(function(i, val) {
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:"get",
            url: 'deal/like/'+ likeid,
        });
        return +val+1;
        });
        $('#like-' + likeid).replaceWith($('#unlike-' + likeid).html());
    }
</script>


<script>
    function unlikethis(likeid)
    {
        $('#dealid-' + likeid).html(function(i, val) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type:"get",
                url: 'deal/like/'+ likeid,
            });
            return +val-1;
        });
        $('#unlike-' + likeid).replaceWith($('#like-' + likeid).html());
    }
</script>

And the view (Im use laravel):

 $if_null = App\Like::where('post_id','=', $deal->id)
                            -> where('user_id', '=', Auth::User()->id )
                            ->first();
                        if (is_null($if_null)){
                        ?>
                        <div id="like-{{$deal->id}}">
                        <button onclick="likethis(this.id)" name="like" id="{{$deal->id}}"  class="link m-r-10"><i class="fa fa-heart"></i></button>
                        </div>
                        <div style="display:none;" id="unlike-{{$deal->id}}">
                            <button onclick="unlikethis(this.id)" id="{{$deal->id}}" class="link m-r-10"><i class="fa fa-heart text-danger"></i></button>
                        </div>
                        <?php }
                        else {?>
                        <div id="unlike-{{$deal->id}}">
                        <button onclick="unlikethis(this.id)" id="{{$deal->id}}" class="link m-r-10"><i class="fa fa-heart text-danger"></i></button>
                        </div>
                        <div style="display:none;" id="like-{{$deal->id}}">
                            <button onclick="likethis(this.id)" id="{{$deal->id}}" class="link m-r-10"><i class="fa fa-heart"></i></button>
                        </div>
                        <?php }?>
                        <div id="dealid-{{$deal->id}}"> {{$deal->like->count()}} </div>

Can anyone know why ? thanks alot! (: PS: Sorry for my english.

Ok I try some things and I get what I want with this code

            if ($('#like-' + likeid).is(":visible")) {
            $('#like-' + likeid).hide();
            $('#unlike-' + likeid).show();
        } else {
            $('#unlike-' + likeid).hide();
            $('#like-' + likeid).show();
        }