Javascript dropdown and switcher buttons next prev

I need choose from dropdown menu one of class, and put it to id=”get”
The switcher work perfectly, thanks to Mister Jojo (Javascript show next prev content appenchild)

my question is,

  1. is here more compact, lightly solution than I made with functions in dropdown

  2. when I choose from dropdown menu and click to next or prev button, it does not work immediately, only when I click second time

Many Thanks

function tog() {document.getElementById("ts").classList.toggle("show");}

window.onclick = function(event) {
 if (!event.target.matches('.dropbtn')) {
    var dr = document.getElementsByClassName("ts");
    var i;
    for (i = 0; i < dr.length; i++) {
      var odr = dr[i];
      if (odr.classList.contains('show')) {
        odr.classList.remove('show');
      }
    }
  }
  }
  

const
  dGet   = document.getElementById('get')
, dBack  = document.getElementById('back')
, slides = document.querySelectorAll('.mySlides')
, current = 
  { slide : null
  , index : 0
  , len   : slides.length
  }; 

 
plusDivs(0);

function plusDivs(n)
  {
    // more easy with a modulo...
  current.index = (current.index +n +current.len) % current.len;
  
  if (current.slide) dBack.appendChild( current.slide )
  
  current.slide = dGet.appendChild( slides[current.index] )
  }

function f1() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var back = document.getElementById("back");
  
  document.getElementById("get").appendChild(one);
back.appendChild(two);
  back.appendChild(three);
}

function f2() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var back = document.getElementById("back");
  
  document.getElementById("get").appendChild(two);
back.appendChild(one);
  back.appendChild(three); }

function f3() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var back = document.getElementById("back");
  
  document.getElementById("get").appendChild(three);
back.appendChild(one);
  back.appendChild(two); }
#get {
  height   : 300px;
  width    : 500px;
  border   : 1px solid red;
  left     : 100px;
  position : absolute;
  }
#back {
  display : none;
  }
.ts > a.tAr {display:block!important;background-image: linear-gradient(#3d00974a, transparent);}
.teletab {
  float:left;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
    position: absolute;
    background: #1b092d;
    max-height: 400px;
overflow-x: hidden;
width: 216px;
}
.teletab a {
  padding: 4px 16px;
  display: none;
  width: 200px;
max-height:40px;
border-style: solid;
border-width: 1px 0 0 0;
color: #2aa;
}
.show a {display: block!important;}
<div class="teletab ts" id="ts">
<a onclick="f1()">first</a>
<a onclick="f2()">second</a>
<a onclick="f3()">third</a>
</div>
<button onclick="tog()" class="dropbtn ddb">
▽
</button>
<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<div id="back">
  <div id="one" class="mySlides">
    <span class="Tx1">111</span>
  </div>
  <div id="two" class="mySlides">
    <span class="Tx1">222</span>
  </div>
  <div id="three" class="mySlides">
    <span class="Tx1">333</span>
  </div>
</div>
<div id="get"></div>