I use JQuery to add new <li> item to the existing <ul> but the new <li> deviates from other <li>

Question

This is the code about in my template file

<ul class="playListForm" id="playList" style="list-style: none;">
            @foreach($listSong as $song)
            <!--<?php 
                $url = URL::route("listentomusic",$song->id_song."**".$song->title."**".$song->artist."**".$song->code128."**".$song->code320); 
                $urlup = URL::route("voteup", $song->id_song);
                $urldown = URL::route("votedown", $song->id_song);
            ?>-->
            <?php
                $urlsource = 'http://api.mp3.zing.vn/api/mobile/source/song/'.$song->code128;
                if($song->position == 1){
            ?>
                <li id="{{$song->position}}" class="active">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div>
                        </a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp" style="visibility: hidden;">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 9px">
                    </div>
                </li>
            <?php
                }
                else{
                    if($song->position != count($listSong)){
            ?>
                <li id="{{$song->position}}">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 10px">
                    </div>
                </li>
            <?php
                    }
                else{
            ?>  
                <li id="{{$song->position}}">
                    <div class="form-inline plItem">
                        <div class="form-group plNum">{{$song->position}}</div>
                        <a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
                        <div class="form-group">
                            <div class="form-inline">
                                <p style="display:none" id="songId">{{$song->id_song}}</p>
                                <button id="upBtn" class="form-group btn btn-default btnUp">
                                     Up
                                </button>
                                <button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">
                                     Down
                                </button>
                            </div>
                        </div>
                        <hr style="margin-top: 10px">
                    </div>
                </li>
            <?php   
                    }
                }
            ?>
            @endforeach
    </ul>

And I tried to append new "li" by this JQuery code:

var newLI = '<li id="'+lastPos+'">'+
                    '<div class="form-inline plItem">'+
                        '<div class="form-group plNum">'+lastPos+'</div>'+
                        '<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
                        '<div class="form-group">'+
                            '<div class="form-inline">'+
                                '<p style="display:none" id="songId">'+song['id_song']+'</p>'+
                                '<button id="upBtn" class="form-group btn btn-default btnUp">'+
                                     'Up'+
                                '</button>'+
                                '<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
                                     'Down'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                        '<hr style="margin-top: 10px">'+
                    '</div>'+
                '</li>';
    $('#playList').append(''+newLI+'');

And here is the result:

So I have a problem about the new li at the last which I added by JQuery. I really don't know why. I hope you could give me some advices. Thank you. P/S: Sorry for my bad English.

Answer 1

Same id maybe confused, generate with function

function generate(lastPos){
var newLI = '<li id="'+lastPos+'">'+
                    '<div class="form-inline plItem">'+
                        '<div class="form-group plNum">'+lastPos+'</div>'+
                        '<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
                        '<div class="form-group">'+
                            '<div class="form-inline">'+
                                '<p style="display:none" id="songId">'+song['id_song']+'</p>'+
                                '<button id="'+lastPos+'_upBtn" class="form-group btn btn-default btnUp">'+
                                     'Up'+
                                '</button>'+
                                '<button id="'+lastPos+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
                                     'Down'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                        '<hr style="margin-top: 10px">'+
                    '</div>'+
                '</li>';
    $('#playList').append(''+newLI+'');
}

call function and new id for LI Element.