I am struggling with conflicting Jquery scripts, using asp.net mvc core 2. Whenever I add the layout page which has its own jquery library for bootstrap it gives the error (JCrop is undefined) If I block jquery in the inspect tool in chrome, it works.

What can I do ? here is my code

The only difference between the two pages, is that the main page (line 5) has the reference default layout in .net MVC which is     Layout = "~/Views/Shared/_Layout.cshtml";

Also I am attaching the chrome network order below

2. 
   
3. @{
4.     ViewData["Title"] = "Crop2";
5.     Layout = null;
6. }
7. 
   
8. <h2>Crop1</h2>
9. 
   
10. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
11. <script type="text/javascript" src="https://cdn.rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
12. 
    
13. 
    
14. <img src="~/images/1.svg" id="Image1" />
15. <script>
16. 
    
17. 
    
18.         $(document).ready (function () {
19. 
    
20.                     $('#Image1').Jcrop({
21. 
    
22.                         onSelect: function (c) {
23.                             console.log(c);
24.                          //onLoad : SetCoordinates,
25.                         //onSelect: SetCoordinates
26.                         }
27.                     });
28. 
    
29. 
    
30.             });
31. 
    
32. </script>
33. 
    
34. 
    
35.