slide box horizontally in jquery

HTML

<div id="yellowbox"></div>
<br/>
<br/>
<br/>
<div id="left">left</div>
<div id="right">right</div>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="heading">
        What is your last name?
</div>

<div class="container">
  <div>
    <button type="button" class="btn btn-success btn-block">Yes</button> 
  </div>
  <div>
    <button type="button" class="btn btn-danger btn-block">No</button> 
  </div>
</div>=

CSS

#yellowbox {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 50px;
    background: yellow;
}
body{
    background-color: #2d62b7;
}

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}

.container > div {
  /* these are the flex items */
  flex: 1;
  padding: 10px;
}

.heading{
  color: white;
  font-size:20px;
  line-height: 80px;
  text-align: center;
  border: 2px solid #f69c55;
  margin: 40px;
}

JavaScript

var left = $('#yellowbox').offset().left;


$(document).on('click', '#left', function(event) {
    left -= 50;
    $("#yellowbox").animate({
        "left": left
    }, "slow");
});

$(document).on('click', '#right', function(event) {
    left += 50;
    $("#yellowbox").animate({
        "left": left
    }, "slow");
});