JSFiddle - React, Tailwind, and code Playground

by badcluster

HTML

<div class="container">
    <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRG04JP4wudIvI-tQR8vSZo9gliJmJWa0GkMS15K5W8hXcefL2C
    " />
</div>
<div class="container">
    <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRG04JP4wudIvI-tQR8vSZo9gliJmJWa0GkMS15K5W8hXcefL2C
    " />
</div>

CSS

.container{
  position:relative;  
}
.more,.less{
cursor:pointer;
position:absolute;
left:0px;
top:0px;
}

.less{
left:25px;
}

JavaScript

$('.container').append('<button class="more">+</button><button class="less">-</button>');
$('.more').click(function() {
    var img = $(this).closest('.container').find('img');
    img.css('width',"+=10");
});
$('.less').click(function() {
    var img = $(this).closest('.container').find('img');
    img.css('width',"-=10");
});