Ajax call same id

Question

Im using an ajax call to accomplish the this: When you click on the link it displays it creates a link at the bottom with the same text.

HTML :

 <nav class="navbar">
        <ul>
            <li>
                <a id="addtable" href="#">Add+</a>
            </li>
            <li>
                <a href="#" id="table">Table1</a>
            </li>
            <li>
                <a href="#" id="table">Table2</a>
            </li>
            <li>
                <a href="#" id="table">Table4</a>
            </li>
            <li>
                <a href="#" id="trial"></a>
            </li>
        </ul>
    </nav>

JQuery :

$(document).ready(function(){
    $('#addtable').click(function(){
        $.ajax({
            type: 'GET',
            data: {loadpage: 'addtable'},
            url: 'addtable.php',
            success: function(data){    
            $('#trial').html(data);
            } 
        }); //ajax request
    }); //change function
}); //document ready

 $(document).ready(function(){
    $('#table').click(function(){
        $.ajax({
            type: 'GET',
            data: {loadpage: $(this).text()},
            url: 'addtable.php',
            success: function(data){    
            $('#trial').html(data);
            } 
        }); //ajax request
    }); //change f
});

PHP (addtable.php) :

<?php
    echo $_GET['loadpage'];
?>

When I click on addtable it displays it at the bottom of the list(thats what I wanted) it does that too when I click on table one(it displays table one) but however when I click on table two or table three it doesnt do anything. I think its something to do with them having the same id which is table, I think jquery uses the first one it sees, Does anyone know how to solve that so that it displays table two and three when I click on them.

Any help will be appreciated.

Answer 1

id should be unique in same document replace duplicate ids by general class , like :

<nav class="navbar">
    <ul>
        <li>
            <a id="addtable" href="#">Add+</a>
        </li>
        <li>
            <a href="#" class="table">Table1</a>
        </li>
        <li>
            <a href="#" class="table">Table2</a>
        </li>
        <li>
            <a href="#" class="table">Table4</a>
        </li>
        <li>
            <a href="#" id="trial"></a>
        </li>
    </ul>
</nav>

Then use dot . (class selector) in your js :

$('.table').click(function(){

Hope this helps.

Answer 2

<nav class="navbar">
<ul>
    <li>
        <a id="addtable" href="#">Add+</a>
    </li>
    <li>
        <a href="#" data-id="table">Table1</a>
    </li>
    <li>
        <a href="#" data-id="table">Table2</a>
    </li>
    <li>
        <a href="#" data-id="table">Table4</a>
    </li>
    <li>
        <a href="#" data-id="trial"></a>
    </li>
</ul>

$("[data-id='table']").click(function(){...})

Data-id or class