Placement of JQuery Scripts with multiple other scripts?

Question

I wrote this script

 $.ajax({
     type: "POST",
     url: "/my/GetTagsByID",
     data: {
         Link_ID: LId
     },
     datatype: "json",
     success: function(result) {
         $('#tokenfield-typeahead').val('Success 1, Success 2')
     },
     error: function(jqXHR) {
         alert(jqXHR.status);
     }
 })

The issue is but I don't know what should be the exact location of SCRIPTS

When I up it in this way:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />

The results are the following

This means, I can use TokenField and TypeAhead but it is not replacing values $('#tokenfield-typeahead').val('Success 1, Success 2') which means I cannot access jQuery?

But when I switch location for Jquery script to this (moving JQUERY to the bottom):

<script src="~/Scripts/dist/typeahead.bundle.js"></script>
<link href="~/Scripts/dist/css/tokenfield-typeahead.css" rel="stylesheet" />
<script src="~/Scripts/dist/bootstrap-tokenfield.js"></script>
<link href="~/Scripts/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>

I get the following results

I cannot use Tokenfield, I cannot use TypeAhead anymore.

What am I supposed to do?

Added new code I have added the new code, it seems like JQuery is unable to recognise tokenfiled as a function - How can I resolve this where i have added all required references - See the code below (i am getting same error in console and no matter where I test) - Please run the Code and click the button

$('#bt').click(function() {

  $('#tokenfield-typeahead').tokenfield('setTokens', ['blue', 'red', 'white']);

});

<link href="http://sliptree.github.io/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://sliptree.github.io/bootstrap-tokenfield/dist/bootstrap-tokenfield.js"></script>



<input type="text" class="form-control" id="tokenfield-typeahead" value="Temp 1, Temp 2" data-limit="10" placeholder="Enter tags" />

<button id="bt">Click me</button>

Answer 1

Found the solution - Thanks for T.J to advising run the script in console

The issue was, Bootstrap.min.js needed to be loaded before Tokenfiled (JS) - Doing that fixed the issue and now JQuery can identify Tokenfield as a function and works as intended. I still don't under why Bootstrap was not loading because I had it in my _Layout page and in the Bundle. In any case i will see how can i re-arrange my script bundles -

Thanks