I employ JQuery to insert a fresh <li> element into the current <ul>, however, the latest <li> stands out from the rest of the <li> items

This is the snippet of code 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 attempted to add a new "li" using 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 outcome:

I am facing an issue with the new li element that I added using JQuery. I am unsure why this is happening. Any advice would be greatly appreciated. Thank you. P/S: Apologies for any language errors.

javascriptjqueryhtmlcsshtml-lists

Answer №1

Generating unique IDs to avoid confusion

function generateNewId(previousId){
var newID = '<li id="'+previousId+'">'+
                    '<div class="form-inline plItem">'+
                        '<div class="form-group plNum">'+previousId+'</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="'+previousId+'_upBtn" class="form-group btn btn-default btnUp">'+
                                     'Up'+
                                '</button>'+
                                '<button id="'+previousId+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
                                     'Down'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                        '<hr style="margin-top: 10px">'+
                    '</div>'+
                '</li>';
    $('#playList').append(''+newID+'');
}

Invoke the function to assign a new ID to the LI element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sorting/merging/consolidating data in Angular

Take a look at this code snippet: rowData = [ [ '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2018-12-10 08:00:00' ...

javascripttypescript

Why is Angular.orderBy not displaying any data on the Page?

Embarking on my first Angular project with Firebase Firestore, I am excited to showcase some of the code below. I recently learned Angular and here is what I have accomplished so far: Component.html <section class="rank"> <p class=& ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Looking to position a JSX component to the left on your webpage with React and Bootstrap?

Currently, I am working on a React project where I am utilizing Bootstrap to style my components. The issue I am facing is with aligning a JSX component to the left on my webpage. Here is the code snippet of the component: import React from 'react&apo ...

cssreactjstwitter-bootstrapbootstrap-4frontend

Show blank value if there are no search results, along with an additional menu option

I am currently working on a Typeahead feature with a customized menu using the renderMenu method. In this setup, I have added 2 custom menu items at the bottom - one divider and a button. An issue arises when there are no search results. If I do not inclu ...

javascriptreactjstypescripttwitter-bootstrapreact-bootstrap-typeahead

Implementing JavaScript Code in TypeScript

Every JavaScript code should also be valid in TypeScript, but when attempting to run the following code snippet below, an error is triggered. Could someone convert this JavaScript code into TypeScript? Error: 20:9 - TS2531 Error: Object is possibly 'z ...

javascripthtmlangulartypescriptbootstrap-4

The .map() function is failing to produce a new array when utilizing the return function

For a React challenge, I was tasked with creating a card that generates a specific number of random numbers based on user input. To achieve this, I wrote a function called "getRandomNum" to generate random numbers within a given range and check if they a ...

javascriptarraysreactjsfunctioncallback

Use the document.getElementById function in JavaScript to dynamically retrieve elements based on user input in an HTML document. This will

I am currently working towards creating a gallery using pure JavaScript. To start, I am experimenting with a model that involves two buttons - when button #1 is clicked, the string "1.jpg" appears below, and when button #2 is clicked, "2.jpg" is displayed. ...

javascriptarrays

Ways to structure a MySQL query based on date range using JavaScript

How can I retrieve data between two dates using express js in JavaScript? The query I am using is shown below: period = `created_datetime BETWEEN ` + fromdate + ` AND ` + todate; However, I am encountering an error as follows: You have an error in your S ...

javascriptmysqlnode.jsexpress

Issue with maplace.js preventing the display of the Google map

I have followed the setup instructions found at . After loading the maplace.js file on my server, I incorporated the provided code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>minimal maplace</title> < ...

jqueryhtmlgoogle-maps-api-3

Can a JSON response include a jQuery function?

Currently, I have a form that utilizes the jQuery post function to send data to a PHP script. Within the PHP script, after performing some checks, a response is sent back formatted like this: $output = json_encode(array('type'=>'error&a ...

phpjqueryjsonajax

What is causing the #wrapper element to not fully contain all of its content within?

I am struggling to figure out why the wrapper on this page is not properly wrapping the content. It's only 332px tall for some reason when it should be the height of the content, which is causing the footer to pull up to the top of the page. Could I b ...

htmlcsswrapper

Guide for assigning a custom style class to a selection field in a Django form

I've been attempting to apply a bootstrap-select class to my choice field, but I keep encountering a 'TypeError: init() got an unexpected keyword argument 'attrs'' error message. class constraintListForm1(forms.Form): region ...

htmldjangodjango-formsbootstrap-4bootstrap-select

Preventing window.load events from firing in JavaScript

Recently, I was playing around with a chrome extension that I had developed on various websites. The purpose of the extension was to print out the web address of the site once the entire page loaded completely. However, when I looked at the plugin's J ...

javascriptjqueryhtml

Mat-select failing to display the selected value

https://i.sstatic.net/8D3tI.pngWhen I load my edit form, I need to populate the form Array with initial values. Although my drop-down selection option is disabled, it does not display in the mat-select. let selectedSpecs = this.editData.element.specificat ...

javascripttypescriptangular6angular-material-6formgroups

Tips for manipulating the size of an image directly within an Angular controller post retrieval from a database

After uploading an image to my database (with dimensions 500*700), I want to ensure that it is always displayed at a fixed size of 300*300. This requirement applies to all images, including those uploaded by users with varying dimensions. ...

javascriptangularjsionic-framework

Building a PathString Tree

I encountered a similar issue like the one discussed in this post (Get a tree like structure out of path string). I attempted to implement the suggested solution but I am facing difficulties getting it to work within an Angular context. The concept involv ...

javascriptarraysangulartypescripttree

Tips for designing a unique Facebook like button

I'm currently working on adding a Facebook like button to the product list page in my Prestashop website. So far, I've successfully added the Facebook like button using the code below. <div class="fb-like" data-href="{$product.link|escape:&ap ...

javascriptphpsmartyprestashop

PHP not displaying line breaks from JavaScript textarea

I am facing an issue while trying to generate a .txt file on my server upon form submission. Despite including newlines in the comment section, they do not show up in the resulting .txt file. Below is the code snippet I am using: Javascript function sen ...

javascriptphp

Verifying if a div in jQuery holds a specific element

I am currently developing drag and drop widgets using jQuery. After dropping them, I need to verify if my draggable and droppable widget is located inside another div. <div id="droptarget"> <div class="widget">I'm a widget!</div> ...

jqueryhtmldrag-and-drop

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

htmlangulartypescript