List of duplicate buttons

Question

On the webpage I am creating, I have a slider in the index with a list of buttons. When creating a title using a different list for the menu, it adds buttons from the slider.

I obviously want to remove the dots from above and try a few things, with no result. Kudos for a person who has the patience to find a mistake.

/* Menu */

#menu {
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20px;
}
#menu_names {
  list-style-type: none;
  width: 100%;
}
.menu_button {
  float: left;
  width: 8em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: 14px;
  background-color: #FFF;
  color: #000;
  padding: 0.2em 0.6em;
  border-bottom: 3px solid #000;
}
.menu_button:hover {
  float: left;
  width: 8em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: 14px;
  background-color: #000;
  color: #FFF;
  padding: 0.2em 0.6em;
  border-bottom: 3px solid #3CC;
}
.carousel-buttons-container {
  width: 600px;
  margin-top: 15px;
  margin-left: 45%;
  position: relative;
  padding: 0;
  display: inline-block;
}
.carousel-buttons-container carousel-list {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
}
.carousel-buttons {
  background-color: #000;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
  cursor: pointer;
}
.carousel-buttons:last-of-type {
  margin: 0 auto;
}

<!-- Menu -->

<div id="menu">
  <ul id="menu_names">
    <li class="menu_button">WOMEN</li>
    <li class="menu_button">JUNIOR</li>
    <li class="menu_button">ACCESSORIES</li>
    <li class="menu_button">COLLECTIONS</li>
    <li class="menu_button">SALE</li>
    <li class="menu_button">MY ACCOUNT</li>
  </ul>
</div>

<!-- Slider -->

<div id="index_container">
  <div id="image_slide">
    <div class="carousel-container">
      <div class="left-arrow"></div>
      <div class="right-arrow"></div>
      <div class="carousel-image-holder">
        <img src="images/bg.jpg" />
        <img src="images/bg.jpg" />
        <img src="images/bg.jpg" />
        <img src="images/bg.jpg" />
        <img src="images/bg.jpg" />
      </div>
    </div>
    <div class="clear"></div>
    <div class="carousel-buttons-container">
      <ul class="carousel-list">

      </ul>
    </div>

Run codeHide result

Javascript

   <script>
    $(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;

var addId = numImgs;



if(numImgs == 2){       
    var clicked = 0;
    imgCount = numImgs-2;
}else if(numImgs <= 1){
    $(".right-arrow").hide();       
}else{
    var clicked = 1;        
    imgCount = numImgs-1;
}
  if(numImgs > 2){
 for (var i=0; i<numImgs; i++){
  $("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
  var addId = addId - 1;
 }
}else{

}


 $(".carousel-buttons").click(function(){

var findIdClicked = $(this).attr("id");

var splitString = findIdClicked.split("carousel")   
var findTheNumb = splitString[1];

$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
 var adjustNumberforSlide = findTheNumb-1;

 $(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});       
console.log(clicked);

if(findTheNumb == 1){
     $(".left-arrow").hide();
    $(".right-arrow").show();
 }else if (findTheNumb == numImgs){
    $(".right-arrow").hide();
    $(".left-arrow").show();
 }else{
     $(".right-arrow").show();
    $(".left-arrow").show();
}
});


 $(".carousel-buttons-container").find("carousel-buttons").first().addClass("active");  


    $(".right-arrow").click(function(){

     if (clicked < imgCount){

    $(".carousel-image-holder").animate({"left": "-=600px"});


        console.log(clicked);
    }else{
    $(".carousel-image-holder").animate({"left": "-=600px"});
    $(".right-arrow").hide();

        console.log(clicked);
    }

    clicked = clicked+1;
    $(".left-arrow").show();
    $(".carousel-buttons").removeClass("active");
    $("#carousel"+clicked).addClass("active");

    });

    $(".left-arrow").click(function(){

    if (clicked > 2){

    $(".carousel-image-holder").animate({"left": "+=600px"});

        console.log(clicked);
    }else{
    $(".carousel-image-holder").animate({"left": "+=600px"});
    $(".left-arrow").hide();

        console.log(clicked);
    }

    $(".right-arrow").show();
    clicked = clicked-1;
    $(".carousel-buttons").removeClass("active");
    $("#carousel"+clicked).addClass("active");


    });
    </script>

CODE: http://jsfiddle.net/k5gvk15g/

Answer 1

Change this line:

$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');

For this:

$("ul.carousel-list").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');

What happens is that the first line adds buttons to each ul element. You want to add it only to a specific ul element.