I am trying to create a slide left and right effect with an onclick command button on dynamically loaded items using CSS and JS.

I have been able to make the buttons call a translate function but they only move left/right only once. since I have a lot of dynamically loaded items, I want the button to be able to translate the images left/right over and over again. Is there any way to do it? here is the link codepen

          <!--Category Images-->  
      <button id="button" class="btn" onclick="translateRight()">Prev</button>
        <div id="itemImages" class="d-flex container-fluid  CatImages " alt="store items"></div> 
        
        <button id="button" class="btn" onclick="translateLeft()">Next</button>
<style>
    .item {
      display: inline-flex;
      background-color: white;
      padding: 10px;
      margin: 0px 20px 0px 20px;
      text-align: center;
      transform: translate(-0%,0%);
    }
    
    .btn {  
      height: 80px;
      width: 100px;
      background-color: white;
      z-index: 99;
      margin: 6% 0% 0% 0%;
      box-shadow: 6px 7px 10px 2px #efefef;
      text-align: center;
      
    }</style><script>
    function translateLeft(){
      var translateLeft = document.getElementById("itemImages").style.transform = "translate(-20%,0%)"
    }
    
    function translateRight(){
      var translateRight = document.getElementById("itemImages").style.transform = "translate(20%,0%)"
    }
      </script>