使用Javascript/Ajax对多个文章超链接的文章增量视图计数

我创建了一个简单的2窗格界面的博客;文章链接在左边，文章内容在右边。这已经实现了使用Twitter Bootstrap 2.3 - Tabbable标签(从这里)。

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#lA" id="viewarticle" articleid="20" data-toggle="tab"> Section 1 <span id="viewno"></span> </a></li>
        <li><a href="#lB" id="viewarticle" articleid="19" data-toggle="tab"> Section 2 <span id="viewno"></span> </a></li>
        <li><a href="#lC" id="viewarticle" articleid="18" data-toggle="tab"> Section 3 <span id="viewno"></span> </a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="lA">
            <p>I'm in Section A.<span id="viewcntno"></span></p>
        </div>
        <div class="tab-pane" id="lB">
            <p>Howdy, I'm in Section B.<span id="viewcntno"></span></p>
        </div>
        <div class="tab-pane" id="lC">
            <p>This is Section C.<span id="viewcntno"></span></p>
        </div>
    </div>
</div>

现在我想能够增加文章的视图计数，当我点击左边的相应链接，然后在文章标题中显示更新的计数。

我目前使用了以下javascript代码稍微修改(从这里):

    <script type="text/javascript">
        var js_articleid = document.getElementById("viewarticle").getAttribute("articleid");
        alert(js_articleid);
        document.getElementById("viewarticle").onclick = function () {            
            // ajax start
            var xhr;
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
            else xhr = new ActiveXObject("Microsoft.XMLHTTP");     // for IE
            var url = 'viewarticlecount.php?aid=' + js_articleid;
            xhr.open('GET', url, false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState===4 && xhr.status===200) {
                    var div = document.getElementById('viewno');
                    div.innerHTML = xhr.responseText;
                    var div = document.getElementById('viewcntno');
                    div.innerHTML = xhr.responseText;
                }
            };
            xhr.send();
            // ajax stop
            return false;
        };
    </script> 

和对应的php:

//  This sets the timezone to IST
    date_default_timezone_set('Asia/Kolkata');  
    include 'connect.php';
    $articletbl="tbl_articles";
    $articleid=$_GET['aid'];
    $sql_articlecnt="UPDATE $articletbl SET `views`=`views`+1 WHERE `id`='$articleid'";
    $result_articlecnt=  mysqli_query($con, $sql_articlecnt);
    $sql_articlecount="SELECT * FROM $articletbl WHERE `id`='$articleid'";
    $result_articlecount=  mysqli_query($con, $sql_articlecount);
    $data_count=  mysqli_fetch_array($result_articlecount);
    $articlecount=$data_count['views'];
    echo $articlecount;
?>

我面临的问题是，这只适用于默认情况下激活的第一个链接。它似乎与其他文章链接不起作用。我哪里做错了?是否有一些缺失的东西，将确保各自的文章链接，当点击将传递其链接id到Ajax查询，这将增加数据库，并恢复与更新计数??

我有初级水平的php技能，刚刚开始探索javascript。如有任何帮助，不胜感激。

谢谢!