JQuery - scroll to an element with a dynamic class

Question

I try to do the following: When I click on an element, it clones all the children into another div and scrolls through the clone of the div I clicked on.

To do this, I add a class vpto the clone of the clicked object. It works great. Then I added this to scroll to this element:

var target = output.find(".vp");

$(".output").animate({
  scrollLeft: target.offset().left
}, 500);

But that does not work. At the first click, it works, but then it scrolls to an element that does not have a class .vp.

Here is a snippet. Does anyone know what I did wrong?

var output = $(".output div");

$(".wrapper div").click(function(){
  
  var size = $(".wrapper div").length;
  output.css('width', size * 100 + 'vw');
  
  var index = $(this).index() + 1;
  
  output.empty();
  
  $(".wrapper div").each(function(){
    $(this).removeClass("vp");
    $(this).clone().appendTo(output);
  });
    
  $(".output div div:nth-child(" + index + ")").addClass("vp");
  
  setTimeout(function(){
    var target = output.find(".vp");
  
    $(".output").animate({
      scrollLeft: target.offset().left
    }, 500);
  }, 10);
  
});

body{
  width:100vw;
  overflow:hidden;
  margin:0;padding:0;
}
.wrapper{
  height:100%;
  width:100vw;
  background:none;
}
.wrapper div{
  float:left;
  height:100px;
  width:100px;
  background-color: #a0a0a0;
  margin:10px;
  cursor:pointer;
}
.output{
  font-size:2em;
  height:200px;
  width:100vw;
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
}
.output div{
  height:200px;
  width:100vw;
}
.output div div{
  position:relative;
  display:block;
  float:left;
  width:100vw;
  height:200px;
}
.vp{
  background-color:#a0a0a0;
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="output">
  <div></div>
</div>

Run codeHide result

Answer 1

change your function as follows

    $(".output").animate({
      scrollLeft: target.width() * (index-1)
    }, 500);

var output = $(".output div");

$(".wrapper div").click(function(){
  
  var size = $(".wrapper div").length;
  output.css('width', size * 100 + 'vw');
  
  var index = $(this).index() + 1;
  
  output.empty();
  
  $(".wrapper div").each(function(){
    $(this).removeClass("vp");
    $(this).clone().appendTo(output);
  });
    
  $(".output div div:nth-child(" + index + ")").addClass("vp");
  
  setTimeout(function(){
    var target = output.find(".vp");
  
    $(".output").animate({
      scrollLeft: target.width() * (index-1)
    }, 500);
  }, 10);
  
});

body{
  width:100vw;
  overflow:hidden;
  margin:0;padding:0;
}
.wrapper{
  height:100%;
  width:100vw;
  background:none;
}
.wrapper div{
  float:left;
  height:100px;
  width:100px;
  background-color: #a0a0a0;
  margin:10px;
  cursor:pointer;
}
.output{
  font-size:2em;
  height:200px;
  width:100vw;
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
}
.output div{
  height:200px;
  width:100vw;
}
.output div div{
  position:relative;
  display:block;
  float:left;
  width:100vw;
  height:200px;
}
.vp{
  background-color:#a0a0a0;
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="output">
  <div></div>
</div>

Run codeHide result