Обряд задницы sh говорит, что функция стрелки не имеет this, поэтому, если вы наберете sh, вы можете конвертировать () => {} в function() {}. Также вам не хватает . в "tab-control"
Рабочий пример
$(".tab-list").each(function() {
$("#p").html("hello")
/* for each tab-list*/
let $this = $(this);
let $tab = $this.find("li.active");
let $link = $tab.find("a");
let $panel = $($link.attr("href"));
/*When Clicked on a tab add this function*/
$this.on("click", ".tab-control", function(e) {
e.preventDefault();
let $link = $(this);
let id = this.hash;
if (id && !$link.is("active")) {
$panel.removeClass("active");
$tab.removeClass("active");
$panel = $(id).addClass("active");
$tab = $link.parent().addClass("active");
}
});
});
/* Create page*/
.create {
bottom: 75px;
top: 75px;
left: 20px;
font-size: large;
width: 100px;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container create position-absolute">
<div class="row">
<div class="col-3">
<ul class="list-group headings tab-list">
<li class="active"><a href="#tab-goal" class="tab-control">Goal</a></li>
<li><a href="#tab-response" class="tab-control">Response</a></li>
<li><a href="#tab-reward" class="tab-control">Reward</a></li>
<li><a href="#tab-cue" class="tab-control">Cue</a></li>
<li><a href="#tab-craving" class="tab-control">Craving</a></li>
<li><a href="#tab-preview" class="tab-control">Preview + Create</a></li>
<ul>
</div>
<div class="col-9">
<form onsubmit="theTemplate.submitForm('createForm')" id="createForm" action="GET" class="tab-content">
<div id="tab-goal" data-tab-content class="active form-group tab-panel">
<h1>Goal</h1>
<label>What is your desired outcome?</label>
<input name="goalOne" type="text" class="form-control">
<label>What type of person achieves that outcome?</label>
<input name="goalTwo" type="text" class="form-control">
</div>
<div id="tab-response" data-tab-content class="form-group tab-panel">
<h1>Response</h1>
<label>What habit does this type of person have?</label>
<input name="responseOne" type="text" class="form-control">
<p>List what you could do for the first 2 minutes of this new habit, from very easy to very difficult.</p>
<table name="responseTwo" class="table-sm">
<tr>
<th>Very Easy</th>
<td><input name="vEasy" type="text"></td>
</tr>
<tr>
<th>Easy</th>
<td><input name="easy" type="text"></td>
</tr>
<tr>
<th>Normal</th>
<td><input name="normal" type="text"></td>
</tr>
<tr>
<th>Difficult</th>
<td><input name="difficult" type="text"></td>
</tr>
<tr>
<th>Very Difficult</th>
<td><input name="vDifficult" type="text"></td>
</tr>
</table>
</div>
<div id="tab-reward" data-tab-content class="tab-panel">
<h1>Reward</h1>
<label>What can you keep track of to measure your progress?</label>
<input name="rewardTwo" type="text" class="form-control">
<label>What will you use to track your progress?</label>
<input name="rewardOne" type="text" class="form-control">
</div>
<div id="tab-cue" data-tab-content class="tab-panel">
<h1>Cue</h1>
<label>How can you design your enviroment to make it obivous to do your new habit?</label>
<input name="cueOne" type="text" class="form-control">
<label>Which established habit will you do before your new habit?</label>
<input name="cueTwo" type="text" class="form-control">
</div>
<div id="tab-craving" data-tab-content class="tab-panel">
<h1>Craving</h1>
<label>How can you re-frame your new habit to make it seem more attractive?</label>
<input name="cravingOne" type="text" class="form-control">
<label>What habit you want to do, will you do after your new habit?</label>
<input name="cravingTwo" type="text" class="form-control">
</div>
<div id="tab-preview" data-tab-content class="tab-panel">
<h1>Preview + Save Habit</h1>
<label for="">To download your cheat sheet click Preview Habit</label>
<button type="submit" class="btn btn-primary">Preview Habit</button>
<lab for="">To save your habit to "Habit List", to download later click Save Habit.</lab>
<button type="submit" class="btn btn-primary">Save Habit</button>
</div>
</form>
</div>
</div>
</div>