Move square to right on every click
Solution 1:
Right now you're simply toggling the class, so it moves right and back to its original position.
You need to add a value to the already existing value, in this case 100 pixels.
Also not getting an error from your original fiddle.
const square = document.querySelector('#square');
square.addEventListener('click', moveRight);
function moveRight() {
square.style.left = square.offsetLeft + 100+'px';
}#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}<div id="square"></div>