Duplicate html codes and values after form submission

I wants to create a form that accept number of item scanings before submission. Eg, box A has 3 items, user will need to scan 3 times item A (counted by javascript) before allowed for form submission. After submission user will be redirected to the same page.

However, after form submission, getElementById().value, which suppose to get the current page data, has now only return previous page data. By checking inspector, I realised that the codes and htmls of previous page are still existed after form submission. What is the cause of all this? Anyone please help.

Sorry if my question makes you hard to understand.

My html and javascript codes

<?php
/* @var $this ContainerController */

$this->footerIsShow = true;
$this->navMidTitle = "Unload Container";

$form = $this->beginWidget('bootstrap.widgets.TbActiveForm',
    array(
        'id' => 'barcode-form',
        'action' => Yii::app()->createUrl($this->route),
        'method' => 'post',
        'htmlOptions'=>array('autocomplete'=>'off'),
    ));
?>

<input type="hidden" name="total_scan" id="total_scan" value="<?=$_totalScan?>" />
<input type="text" name="total_item" id="total_item" value="<?=$_totalItem?>" />
<input type="text" data-type="search" value="" name="barcode" id="barcode" autofocus>
<?php $this->widget('bootstrap.widgets.TbButton', array(
    'buttonType'=>'button',
    'type'=>'primary',
    'label'=>'scan',
    'htmlOptions'=> array('onclick' => 'js:$(this).submit();'),
)); ?>
<button type="button" onclick="printTotal();">check total item</button>

<?php $this->endWidget(); ?>


<script type="text/javascript">
    function scan()
    {
        var totalScan = document.getElementById("total_scan").value;
        var totalItem = document.getElementById("total_item").value;
        totalScan++;
        document.getElementById("total_scan").value = totalScan;
        refreshItemCountLabel();
    }

    function refreshItemCountLabel()
    {
        var totalScan = document.getElementById("total_scan").value;
        var totalItem = document.getElementById("total_item").value;
        document.getElementById("scan_count_label").innerHTML = totalScan+"/"+totalItem;
    }

    function hasFullItemScan()
    {
        var totalScan = document.getElementById("total_scan").value;
        var totalItem = document.getElementById("total_item").value;
        return (totalScan>=totalItem);
    }

    $( document ).ready(function() {
        $("#barcode-form").submit(function(e) {
             scan();
             if(!hasFullItemScan())
             {
                 e.preventDefault();
             }
             else
             {

             }
        });
    });
</script>

html inspection outcome before form submission

html inspection outcome after form submission. (the grey color line was the previous page html content including data values) (the highlighted one is the new content after form submission)

(* I have hide the content of html inspection, pictures are used to show that previous codes (grey part) are still inside it after form submission)