I'm currently making a form for uploading new members to a web page.I built the form using JotForm which includes js files for controlling the style (hide/show fields, fields that are required turn red, etc.)

The js for this form worked fine on its own, but I also included a picture crop/upload as an extra. This also worked when I was testing it in a separate web page on its own, but now combined with the form, the js conflicts and I don't know how to stop that.

My script head section looks like this:

2. <!-- Jotform js -->
3.       <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
4.       <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10027" type="text/javascript"></script>
5.       <script type="text/javascript">
6.             JotForm.setConditions([{"action":[{"id":"action_0_1448505712729","visibility":"Show","isError":false,"field":"77"}],"id":"1448505521328","index":"0","link":"Any","priority":"0","terms":[{"id":"term_2_1448505712729","field":"68","operator":"equals","value":"Librarian","isError":false},{"id":"term_1448505745204","field":"68","operator":"equals","value":"Social Sec.","isError":false},{"id":"term_1448505752197","field":"68","operator":"equals","value":"Press & Publicity","isError":false},{"id":"term_1448505759596","field":"68","operator":"equals","value":"Webmaster","isError":false},{"id":"term_1448505768860","field":"68","operator":"equals","value":"Tour Manager","isError":false},{"id":"term_1448505778873","field":"68","operator":"equals","value":"Merch Rep.","isError":false},{"id":"term_1448505785856","field":"68","operator":"equals","value":"Ordinary Member","isError":false}],"type":"field"}]);
7.             JotForm.init(function(){
8.                   setTimeout(function() {
9.                         $('input_76').hint('e.g. 1st, 2nd, 3rd');
10.                   }, 20);
11.                   JotForm.clearFieldOnHide="disable";
12.                   JotForm.onSubmissionError="jumpToSubmit";
13.             });
14.       </script>
15.       <!-- Image cropper js -->
16.       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
17.       <script src="js/jquery.cropit.js"></script>
18.       <script src="js/index.js"></script>

because the  prototype.forms.js and  jotform.forms.js appear first, they seem to work whilst the image cropper does not.

If I put the image cropper files first, the reverse happens and the image cropper works but the other javascript doesn't.

Having read up on this a lot of people talk about this being jQuery conflicts, but I'm not entirely sure what the problem/solution is.

All help appreciated, thanks.

Source (image cropper working only):  http://concert-band.co.uk/new/Forms/index2.php