I am in need of incorporating multiple tabbed sections on a single page, but unfortunately they are currently interconnected. When one tab is clicked, it impacts the others.

To see this issue in action, you can visit: https://jsfiddle.net/pxpsvoc6/

This is the HTML code snippet:

<div class="recom-content">

    <ul class="tabs">
        <li class="active" rel="overview1">Overview</li>
        <li rel="prices1">Prices</li>
    </ul>
    <!--Close Tabs Menu-->

    <div class="tab_container">

        <h3 class="tab_drawer_heading" rel="overview1">Overview</h3>
        <div id="overview1" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>

        <h3 class="tab_drawer_heading" rel="prices1">Prices</h3>
        <div id="prices1" class="tab_content">
            conetasd
        </div>

    </div>
    <!--Close Tabs Container-->

    </div>
    <!--Close Recom Content-->



        <div class="recom-content">

    <ul class="tabs">
        <li class="active" rel="overview2">Overview</li>
        <li rel="prices2">Prices</li>
    </ul>
    <!--Close Tabs Menu-->

    <div class="tab_container">

        <h3 class="tab_drawer_heading" rel="overview2">Overview</h3>
        <div id="overview2" class="tab_content">
            <h2>Lamborghini</h2>
            <h1>huracan</h1>
            <hr>
            <p>Adhuidenter us, consuleretis habunte, Caturideo estiaeq uamdien duconsimum cre ni inc re crurarentiam det nonsus; C. Cen Etrei cae perdiere que ta, coneque ina, Cat, popoenatum actatin sultodi factod norum am iusa dica aturnih iciemnenam aperis. Cion</p>
            <br>
            <a href="#"><div class="buttona">Book Now</div></a>
        </div>

        <h3 class="tab_drawer_heading" rel="prices2">Prices</h3>
        <div id="prices2" class="tab_content">
            conetasd
        </div>

    </div>
    <!--Close Tabs Container-->

    </div>
    <!--Close Recom Content-->

Below is my CSS styling:

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px;
    width: 100%;
    margin-bottom:10%;
}

ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    height: 75px;
    width:50%;
    background-color: #000000;
    overflow: hidden;
    position: relative;

    font-family: 'montserratlight';
    font-size:15px;
    line-height:75px;
    color:#ffffff;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:10px;
    letter-spacing:1px;

}

ul.tabs li:hover {
    background-color:#525252;
    color: #ffffff;
}

ul.tabs li.active {
    background-color:#ffffff;
    color: #000000;
    display: block;
    font-family: 'montserratregular';
}

.tab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 400px;
    background-color:#ffffff;
    overflow: auto;
}

.tab_content {
    padding: 10%;
    display: none;
}

.tab_content h2 {
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:4px;
}

.tab_content hr {
    width:20%;
    margin-left:0px;
    margin-top:20px;
    margin-bottom:20px;

    border:1px solid #dadcdf;
}

.tab_content p:last-of-type {
    margin-bottom:0px;
}


.recom-content  {
    width:200px;
    height:auto;
    display:table-cell;
    vertical-align:top;
    text-align:left;
    border:1px solid #dadcdf;
}


.tab_drawer_heading { display: none; }

@media screen and (max-width: 768px) {
    .tabs {
        display: none;
    }
    .tab_drawer_heading {

        font-family: 'montserratregular';
        font-size:13px;
        line-height:50px;
        color:#ffffff;
        text-transform:uppercase;
        margin-bottom:10px;
        letter-spacing:0px;
        text-align:center;

        background-color:#b1b8be;
        margin: 0;
        padding: 2px 0px;
        display: block;
        cursor: pointer;
        border-bottom:1px solid #a8afb7;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .d_active {
        background-color:#6f787e;
        color: #fff;
    }
}

And here is the JavaScript section:

// Tabbed content functionality
$(".tab_content").hide();
$(".tab_content:first").show();

/* For tab mode */
$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel"); 
  $("#"+activeTab).fadeIn();        

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

});
/* For drawer mode */
$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel"); 
  $("#"+d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});


/* Adding extra class "tab_last" to apply right side border to the last tab */
$('ul.tabs li').last().addClass("tab_last");