I can not run 2 javascript scripts on the same page

I made a script in javascript to add and cut an image of an input, it worked perfectly, the problem is when I try to do the same for another file that is loaded on the same page, the first script stops working and only the second works.

HTML first file

<div class="input-field col s12">
        <img id="img"  hidden="500px" src="#">
        <input type="file" id="imagem" name="imagem" onchange="readURL(this,'mini_foto_new');"><br><br>
        <input type="hidden" id="x" name="x" /><!--referente a posição do mouse-->
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" /><!-- referente a altura e largura da imagem-->
        <input type="hidden" id="h" name="h" />
    </div>

JavaScript

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script src="js/jquery.Jcrop.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $('#img').hide();
});
function readURL(input) 
{
    $('#img').show();

      if (input.files && input.files[0]) 
      {
        var reader = new FileReader();

        reader.onload = function(e) 
        {
            $('#img').attr('src', e.target.result);

            jQuery(function($) {
                $('#img').Jcrop({
                      onSelect: exibePreview
                });
               });


        }
        reader.readAsDataURL(input.files[0]);
      }

      function exibePreview(c)
      {
          $('#x').val(c.x);
          $('#y').val(c.y);
          $('#x').val(c.x);
          $('#y').val(c.y);
          $('#w').val(c.w);
          $('#h').val(c.h);
      }
}

$("#img").change(function() {
  readURL(this);
});

</script>

HTML second file

<div class="input-field col s12">
        <img id="img"  hidden="500px" src="#">
        <input type="file" id="imagemEditar" name="imagemEditar" onchange="readURL(this,'mini_foto_new2');"><br><br>
        <input type="hidden" id="x2" name="x2" /><!--referente a posição do mouse-->
        <input type="hidden" id="y2" name="y2" />
        <input type="hidden" id="w2" name="w2" /><!-- referente a altura e largura da imagem-->
        <input type="hidden" id="h2" name="h2" />
    </div>

Javascript

<script type="text/javascript">
$(document).ready(function()
{
    $('#imgEditar').hide();
});
function readURL(input) 
{
    $('#imgEditar').show();

      if (input.files && input.files[0]) 
      {
        var reader = new FileReader();

        reader.onload = function(e) 
        {
            $('#imgEditar').attr('src', e.target.result);

            jQuery(function($) {
                $('#imgEditar').Jcrop({
                      onSelect: exibePreview
                });
               });


        }
        reader.readAsDataURL(input.files[0]);
      }

      function exibePreview(c)
      {
          $('#x2').val(c.x2);
          $('#y2').val(c.y2);
          $('#x2').val(c.x2);
          $('#y2').val(c.y2);
          $('#w2').val(c.w2);
          $('#h2').val(c.h2);
      }
}

$("#imgEditar").change(function() {
  readURL(this);
});

</script>