How to rotate only one image from 10 images on single page

Question

I'm trying to rotate just one image from the multiple generated images on my page. But doing so rotates all the images.
Each image is opened up in a modal and then rotated with a button.

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
    <div class="modal-content">
        <div class="modal-body ">
            <img class="showimage img-responsive" src="" style = "max-width:90%"/>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" >Rotate</button>
        </div>
    </div>
</div>
</div>
<script>
$(document).ready(function () {
$('img').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
        $(".showimage").attr("src", image);
    });
});
});

</script>

This code is inside every new row inside a table

Answer 1

If the images are loaded dynamically, here is an example of how one can achieve the rotate. To individually rotate images, I create a rotation variable that gets a reset when you click on a new cat.

var rotation = 0

$('img').on('click', function () {
    var image = $(this).attr('src');
    $('.showimage').attr('src', image);
    rotation = 0;
    rotate(0)
    $('#myModal').modal('show');
});

$('.rotate').on('click', function () {
      rotation += 45;
      rotate(rotation)
});

function rotate(deg) {
  $('.showimage').css({
      '-webkit-transform' : 'rotate('+ deg +'deg)',
      '-moz-transform' : 'rotate('+ deg +'deg)',
      '-ms-transform' : 'rotate('+ deg +'deg)',
      'transform' : 'rotate('+ deg +'deg)'
  });
}

.image-wrapper {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<img src="https://placekitten.com/300/200" />
<img src="https://placekitten.com/300/150" />
<img src="https://placekitten.com/300/100" />

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
    <div class="modal-content">
        <div class="modal-body ">
            <div class="image-wrapper">
              <img class="showimage img-responsive" src="" style = "max-width:90%"/>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-default rotate">Rotate</button>
        </div>
    </div>
</div>
</div>

Answer 2

The target image is identified with .showimage class.

But your rotate button has no class or ID. Add an identifier to that button and inject the click event to rotate the image. Add the rotate-image id to the button:

<button id="rotate-image" type="button" >Rotate</button>

And then in the JavaScript:

$(document).ready(function () {
  $('img').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
      var shownImage = $(".showimage");
      shownImage.attr("src", image);

      // Remove the rotation class when modal is re-opened.
      shownImage.removeClass('rotated-image');
    });
  });

  // Add rotate event.
  $("#rotate-image").on('click', function () {
    // Add the rotation class.
    $(".showimage").addClass('rotated-image');
  });
});

Answer 3

Give them ids , if it is generated by you.

<img id="myimg1" src=""/>

this way you can do this,

$('img#myimg1').on('click', function () {
    var image = $(this).attr('src');
    //alert(image);
    $('#myModal').on('show.bs.modal', function () {
        $(".showimage").attr("src", image);
    });
});
});