Odtnhj

I have a little problem here, trying to design a profile but can't get bootstrap 4 tabs to work. Here's the profile page code.

@extends('layouts.core')
@section('content')
 <div class="content">


 <div class="row profile-content">
 <div class="col-sm-3">
 <h2>Profile Information</h2>
 <ul class="list-group">
 <li class="list-group-item">
 Name : $post->name
 </li>
 <li class="list-group-item">
 Email : $post->email
 </li>
 <li class="list-group-item">
 Verified : 
 @if($post->email_verified_at) 
 Yes 
 @else 
 No 
 @endif
 </li>
 </ul>
 </div>

 <div class="col-md">
 <h2>Posted Products</h2>
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" id="pills-home-tab" 
 data-toggle="pill" href="#pills-home" role="tab" 
 aria-controls="pills-home" aria-selected="true">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" id="pills-profile-tab" 
 data-toggle="pill" href="#pills-profile" role="tab" 
 aria-controls="pills-profile" aria-selected="false">Profile</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" id="pills-contact-tab" 
 data-toggle="pill" href="#pills-contact" role="tab" 
 aria-controls="pills-contact" aria-selected="false">Contact</a>
 </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
 <div class="tab-pane fade show active" id="pills-home" 
 role="tabpanel" aria-labelledby="pills-home-tab"> 
 @foreach($query as $row)
 <div class="product-card" role="tab">
 <div class="card">
 <div class="card-head">
 <img class="card-img-top" 
 src="/storage/products/$row->image" 
 alt="Card image cap">
 </div>
 <div class="card-body">
 <h5 class="card-title">
 <a href="/product/$row->unique_id">
 $row->name
 </a>
 </h5>
 <p class="card-text">$row->price$</p>
 <p class="card-text">
 @if($row->stock==0)
 <span style="color:red;">
 Not Available 
 </span>
 @else 
 Stock : $row->stock
 @endif
 </p>
 </div>
 <div class="card-body text-center">
 <a href="/product/$row->unique_id" 
 class="btn btn-primary">
 <i class="fas fa-info-circle mr-2"></i>
 Details
 </a>
 @if(Auth::user()) 
 @if(!$row->stock==0)
 <a href="/add/$row->unique_id/1" 
 class="btn btn-success mr-2">
 <i class="fas fa-cart-plus mr-2"></i>
 Add To Cart
 </a>
 @endif 
 @endif
 </div>
 @if(Auth::user()->is_admin || $row->by == Auth::user()->email)
 <form class='col text-center p-0' 
 action=" action('PostsController@destroy' , $row->id)" 
 onsubmit="return confirm('Are you sure you want to delete ?');" class="text-right" method="POST">
 <a class="btn btn-danger w-100">
 <i class="fas fa-trash-alt" style="color:white;"></i>
 <input type='submit' class='none' name="_method" value="Delete">
 </a>
 csrf_field() 
 </form>
 @endif
 </div>
 </div>
 @endforeach
 </div>
 </div>
 <div class="tab-pane fade" id="pills-profile" role="tabpanel" 
 aria-labelledby="pills-profile-tab">
 AAAAAAAAAAAAAAAAAA
 </div>
 <div class="tab-pane fade" id="pills-contact" role="tabpanel" 
 aria-labelledby="pills-contact-tab">
 ...
 </div>
 </div>

 <div class="links">
 $query->links()
 </div>
 </div>
 </div>
@endsection

The javascript just appends the content from the other tabs to this current page. I dont know what's the deal. I want the first tab to display the user posts and when i will click on the second tab i want it to replace everything that's showing currently.