Move element to active element position

Question

I have a unknown number of clickable dots in a list. If I click on one of these elements I like to move a other element to it's position.

So the decorative element slides to the clicked dot. The difficulty for me is that I have a changing number of dots.

Any ideas how this could be done?

.container {
  position: absolute;
  height: 300px;
  width: 600px;
  background-color: #222;
}

.SubNavigation {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 70px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
}

.activedot {
  width: 100%;
  height: 20px;
  position: absolute;
  top: -20px;
  transition: transform .3s ease-out;
  -webkit-transition: -webkit-transform .3s ease-out;
  
/*   
Slide here:
transform: translate3d(-34px, 0px, 0px); 
*/

}

.activedot span {
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  border-top-right-radius: 20px;
  position: absolute;
  left: 0;
}

.activedot span:nth-child(1) {
  left: -50%;
  border-top-right-radius: 20px;

}

.activedot span:nth-child(2) {
  border-top-left-radius: 20px;
  left: 50%;
}

#dotnav-0.active .activedot{
transform: translate3d(-34px, 0px, 0px);
}

.SubNavigation ul {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.SubNavigation ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.SubNavigation ul li span {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  position: absolute;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.SubNavigation ul li.active span {
  background-color: #9c27b0;
  width: 140%;
  height: 140%;
  top: -2px;
}

<div class="container">

<div class="SubNavigation">
  <ul id="dots">
    <li class="dotnav active"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
    <li class="dotnav"><span></span></li>
  </ul>

  <div class="activedot">
    <span></span>
    <span></span>
  </div>

</div>
</div>

Answer 1

$(function() {

  $(".dotnav").on('click', function() {

    var posLeft = $(this).position().left + 19 + 'px';

    $('.activedot').animate({
      left: posLeft
    }, 500);

    $(".dotnav").removeClass('active');

    $(this).addClass('active');

  });

});

.container {
  position: absolute;
  height: 150px;
  width: 600px;
  background-color: #222;
  color: #fff;
}
.SubNavigation {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 70px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
}
.activedot {
  background: #333;
  width: 33px;
  height: 16px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -16px;
  transition: transform .3s ease-out;
  -webkit-transition: -webkit-transform .3s ease-out;
  /*   
Slide here:
transform: translate3d(-34px, 0px, 0px); 
*/
}
.activedot span {
  display: block;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.activedot span:nth-child(1) {
  left: -50%;
  border-top-right-radius: 20px;
}
.activedot span:nth-child(2) {
  border-top-left-radius: 20px;
  left: 50%;
}
#dotnav-0.active .activedot {
  transform: translate3d(-34px, 0px, 0px);
}
.SubNavigation ul {
  font-size: 0;
  position: relative;
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.SubNavigation ul li {
  position: relative;
  display: inline-block;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.SubNavigation ul li span {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  position: absolute;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.SubNavigation ul li.active span {
  background-color: #9c27b0;
  width: 140%;
  height: 140%;
  top: -2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <div class="SubNavigation">
    <ul id="dots">
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav active"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
      <li class="dotnav"><span></span></li>
    </ul>

    <div class="activedot">
      <span></span>
      <span></span>
    </div>

  </div>
</div>