当多次单击按钮时，ajax调用无法保持其状态

I've have the following example code (it can be copied as it is, and run to figure out the problem).

index.php

<doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div style="height:30px;width:100%;">
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="1" class="reprezentant">AAA</a>
        </div>
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="4" class="reprezentant">BBB</a>
        </div>
    </div>
    <br/><br/>

    <div style="height:200px;width:20%;float:left;" id="tabel"></div>
    <div style="height:200px;width:78%;float:left;" id="content"></div>
    <div style="clear:both;"></div>
    <br/><br/><br/>
    <div style="height:30px;width:100%;">
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="btn4">SIZ</a>
        </div>
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="btn5">SIL</a>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){
        $('.reprezentant').click(function(e){
            var rep = $(this).attr('id');
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "tabel.php",
                data: {rep:rep},
                success: function(resp){
                    $('#tabel').html(resp);
                }
            });
        });
        $('#btn4').click(function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "siz.php",
                success: function(resp){
                    $('#content').html(resp);
                }
            });
        });
        $('#btn5').click(function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "sil.php",
                success: function(resp){
                    $('#content').html(resp);
                }
            });
        });
    });
    </script>
</body>
</html>

tabel.php

<?php $rep = $_POST['rep']; ?>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody><?php
        for ($i=1;$i<=$rep;$i++){?>
            <tr>
                <td><?php echo $i;?></td>
                <td>
                    <a href="" class="locatie" id="<?php echo $i;?>"><?php echo 'Name',$i;?></a>
                </td>
            </tr><?php
        }?>
    </tbody>
    <tfoot></tfoot>
</table>

<script type="text/javascript">
var loc, btn;

$('.locatie').click(function(e){
    e.preventDefault();
    loc = $(this).attr('id');
});

$('a[id^=btn4]').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "siz.php",
        data: {idlocatie: loc},
        success: function(html){
            $('#content').html(html);
        }
    });
});
$('a[id^=btn5]').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "sil.php",
        data: {idlocatie: loc},
        success: function(html){
            $('#content').html(html);
        }
    });
});
</script>

siz.php

<?php
$idloc = isset($_POST['idlocatie']) ? $_POST['idlocatie'] : '';
echo $idloc,' ';
?>
SIZ

sil.php

<?php
$idloc = isset($_POST['idlocatie']) ? $_POST['idlocatie'] : '';
echo $idloc,' ';
?>
SIL

After clicking AAA, Name1, and SIZ, the index.php looks like this: enter image description here

  • When I press AAA, an ajax call, which contains a number, will be send to tabel.php, and in the left side of index.php page will be displayed a table with as many rows in it as the sent number. If I press BBB, an ajax call, which contains another number, will be send to tabel.php, and a table with as many rows in it as the sent number will be displayed in the left side of the index.php page.
  • Each table contains some names, and each name being a link, has an id of a number.
  • When a name is clicked, it's id (the number), is send to both siz.php and sil.php files.
  • Now, when any of SIZ or SIL is clicked, it should display in the middle of the page, the number of the id for the clicked name from the left table, plus the name of the button that was clicked (SIZ or SIL).

Problem 1: if I press multiple times SIZ or SIL, then the number sent by table.php will be gone. My question would be, how to solve this problem, so that the number stays in siz.php/sil.php script, no matter how many times I press SIZ or SIL?

Problem 2: now, to be able to see the number of the Name, I must follow this steps:

  • press AAA or BBB
  • press on one of the names from the left table
  • press SIZ or SIL I'd wish to dynamically send the id of the Name (when I click on one of the Names), w/o the need of pressing SIZ or SIL. Can this thing be done?

Thank you!