Button appears superimposed

0

I'm adding buttons to add favorites to favorites, but this button is only appearing in the first songs, it does not appear in the others below, it seems that the buttons are superimposed ... But I can not find the problem ... I'm using css and js ...

CSS:

/* --- BOTOES PARA O SEE MORE --- */

    .option-btn1 {
        position: absolute;
        display: inline;
        top: 50px;
        z-index: 10000;
    }


    .option-btn1 .btn-add-fav i {
        position: relative;
        left: 40px;
        top: 165px;
        font-size: 200%;
        color: #000;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        z-index: 10000;
    }



    .option-btn1 .btn-add-fav i:hover {
        color: #74C8D2;
        z-index: 10000;
    }

JS:

$(".see-more-btn").click(function(){
            let singles=[];
            $(".div-pesquisa").hide();
            $("#more-music").show();
            $("#more-music .row h3").html("You searched for " + response.artists[0].name);
            $(".see-more-music").empty();
            $(".see-more-music").html('<li><button class="go-back-btn" type="button" name="button" id="your-playlist" onclick="backArtist()"><i class="ion-ios-arrow-back" ></i>GO BACK</button></li>');
            url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
            url=encodeURI(url);
            //alert(url);
            $.get(url,function(response,status){
              if (status=='success') {
                for (result of response.releases) {
                  //alert(result.id);
                  var album = result.id;
                  let titulo = result.title;
                  url="http://musicbrainz.org/ws/2/release/"+album+"?inc=recordings+media&fmt=json";
                  url=encodeURI(url);
                  $.get(url,function(response,status){
                    if (status=='success') {
                      let aux=0;
                      for (music of response.media[0].tracks) {
                        for (var i = 0; i < singles.length; i++) {
                          if (singles[i]==music.title) {
                            aux=1;
                            break;
                          }
                        }
                        if (aux==1) {
                          break;
                        }else{
                          singles[i+1]=music.title;
                        }

                      $(".see-more-music").append($("<li>").append($("<figure>").addClass("music-img").append($("<div>").addClass("option-btn1").append($("<div>").addClass("btn-add-fav").append($("<i>").addClass("ion-ios-add").click(function(){
                        addFav(response.items[0].snippet.title);
                      })))).append($("<i>").addClass("ion-ios-play-circle")).append($("<div>").addClass("info-music").append($("<h6>").html(music.title).css("color","#FFF"))).click(function(){
                        $("#more-music").hide();
                        $(".player").show();
                        let url ="https://www.googleapis.com/youtube/v3/search?q="+music.title+"song&maxResults=1&part=snippet&key="+youtubeAPIKey;
                        url=encodeURI(url);
                        $.get(url,function(response,status){
                          if (status=='success') {
                            $(".player iframe").attr("src", "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100vh");
                          }
                        });
                      })));
                    }
                  }
                });
              }
            }
          });
        });

RESULT:

Thank you !!

    
asked by anonymous 23.05.2018 / 23:36

0 answers