I want a tab to always be underlined when I open div then change

Css:

.tabs {
  list-style:none;
  padding: 0;
}
.tabs:after {
  content: " ";
  display: table;
  clear: both;
}
.tabs li a {
 color: #333;
padding-bottom:0.5em;
border-bottom: 2px solid #d7d6d0;
font-size: 0.8em;
}
.tabs li a:active {
border-bottom: 2px solid #cf5630;
}
.tabs li {
float:left;
  margin-left: 15px;
  margin-right: 15px;
}
.tab1 {
  display: none;
}
.tab1.active {
  display: block;
}

Select allOpen in new window

my code:

<span class="block textCenter tabs flex justifyBetween">
<ul class="tabs">
  <li class="uppercase pointer"><a href="#details">details</a></li>
  <li class="uppercase pointer"><a href="#ingredients">ingredients</a></li>
  <li class="uppercase pointer"><a href="#nutrition">nutrition</a></li>
  <li class="uppercase pointer"><a href="#instructions">instructions</a></li>
</ul>
</span>
<div id="tabContent" class="relative">
<span class="shadow block absolute"></span>
<span class="contentBox block">
<div class="tab1" id="details">
<p class="textLeft details">
fdhghjghj
</p>
</div>
<div class="tab1 " id="ingredients">
  Ingredients tab
</div>
<div class="tab1" id="nutrition">
  Nutrition tab
</div>
<div class="tab1" id="instructions">
  Instructions tab
</div>

Select allOpen in new window

JS:

$(function() {
	  $('.tabs a').click(function(e) {
	    e.preventDefault();
	    let target = $(this).attr('href');
	    $('.tab1.active').removeClass('active');
	    $(target).addClass('active');
	    $('.tabs a').css('border-bottom', '2px solid #d7d6d0');
	    $(this).css('border-bottom', '2px solid #cf5630');
	  });
	});

Select allOpen in new window

As you can see it changes the underline color as I link on any of the tab. However this is all inside a popup div and when I first open the popup, my "details" tab is displayed. However it is not underlined, how can I make it underlined then become un-underlined when I click on other tabs?