I am building a list of images that can be modified through a boostrap modal using Cropper js.

 <% crop.forEach(function(crops) { %>

    <div class=card mb-4 box-shadow style=margin-right: 1em;>

      <img data-enlargable class=card-img-top src=/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>

        alt=<%= crops.nom %> style=max-height: 255px; max-width: 348px; object-fit: contain; cursor: zoom-in;>

      <input type=hidden id=dataImage data-catname=<%= crops.cat_nom %> data-idcrop=<%= crops.cropped_id %>>

      <div class=card-body>

        <h5 class=card-title><%= crops.cat_nom %></h5>

        <p class=card-text><%= crops.nom %></p>

        <div class=d-flex justify-content-between align-items-center>

          <div class=btn-group>

            <button type=button name=edit class=btn btn-sm btn-outline-secondary

              data-path=/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>

              data-target=#modal data-toggle=modal>Edit</button>

          </div>

        </div>

      </div>

    </div>

<% }) %>

    <div class=modal fade id=modal tabindex=-1 role=dialog aria-labelledby=modalLabel aria-hidden=true>

      <div class=modal-dialog role=document>

        <div class=modal-content>

          <div class=modal-header>

            <h5 class=modal-title id=modalLabel>Cropper</h5>

            <button type=button class=close data-dismiss=modal aria-label=Close>

              <span aria-hidden=true>&times;</span>

            </button>

          </div>

          <div class=modal-body>

            <div class=img-container>

              <img id=image src= alt=Picture style=max-width: 100%>

              <input type=hidden id=dataGetter>

            </div>

          </div>



          <div class=modal-footer>

            <button type=button class=btn btn-secondary data-dismiss=modal>Close</button>

            <button type=button class=btn btn-success id=editCropToDb>Save</button>

          </div>

        </div>

      </div>

    </div>

  </div>

And here is the script i've come up with to get the img src and pass it to the image tag inside the modal so Cropper can use it.
I've also added some logic to upload it to my server.

$('button[name=edit]').click(function (event) {

    var src = $(this).parents('.card').find('img').attr('src')

    var crop_id = $(this).parents('.card').find('input').data('idcrop')

    var cat_name = $(this).parents('.card').find('input').data('catname')

    $('#dataGetter').data('idcrop', crop_id)

    $('#dataGetter').data('catname', cat_name)

    $('#dataGetter').data('source', src)

    var image = document.getElementById('image');

    $('#image').attr('src', src)

  })





  window.addEventListener('DOMContentLoaded', function () {

    var image = document.getElementById('image');

    var cropBoxData;

    var canvasData;

    var cropper;

    console.log(image)

    $('#modal').on('shown.bs.modal', function () {

      cropper = new Cropper(image, {

        autoCropArea: 0.7,

        viewMode: 1,

        center: true,

        dragMode: 'move',

        movable: true,

        scalable: true,

        guides: true,

        zoomOnWheel: true,

        cropBoxMovable: true,

        wheelZoomRatio: 0.1,

        ready: function () {

          //Should set crop box data first here

          cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);

        }

      })

    }).on('hidden.bs.modal', function () {

      cropBoxData = cropper.getCropBoxData();

      canvasData = cropper.getCanvasData();

      cropper.destroy();

    })





    document.getElementById('editCropToDb').addEventListener('click', function () {

      var initialUrl

      var canvas

      var crop_id = $('#dataGetter').data('idcrop')

      var cat_name = $('#dataGetter').data('catname')

      console.log(crop_id + '/' + cat_name)



      if (cropper) { canvas = cropper.getCroppedCanvas() }

      image.src = canvas.toDataURL();

      canvas.toBlob(function (blob) {

        var formData = new FormData()

        formData.append('catname', cat_name)

        formData.append('crop_id', crop_id)

        formData.append('croppedImage', blob, 'croppedImage.png')

        $.ajax('cropped/edit', {

          method: POST,

          data: formData,

          processData: false,

          contentType: false,

          success: function () {

            alert('Modification faite')

            location = '/cropped'

          },

          error: function () {

            alert('erreur')

            location = '/cropped'

          }

        })

      })

    })

  });

The problem i'm getting is when i click the edit Button after the page is loaded, the modal shows up but Cropper doesn't start.
If i close it and open it again, Cropper starts properly and I can crop my image and upload it.
I'm just a beginner with jquery and all so maybe i can get any advice and help on this !