获取另一个搜索表单结果而不刷新页面

Question

用户将在搜索框中输入产品名称。根据输入的产品名称，我调用java脚本函数在表格中显示价格信息。这工作得很好。

当用户输入另一个产品名称时，新产品的价格信息会被添加到同一网页两次，因为我没有删除以前的产品价格表。

如果我刷新页面，表格会被清除，我只能看到搜索框。

我需要做些什么来允许用户输入另一个产品并获取结果信息表而不刷新页面。

请帮我解决这个问题。

我的代码：

<form class="form-wrapper cf" id="cf-form">
  <input type="text" id="valbox" placeholder="Search here..." required>
  <button type="submit" id="butval">Search</button>
</form>
<table id="priceTable"></table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.pricecheckindia.com/compare.js"></script>
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')
                $("#cf-form").on('submit',function(e)
                {
                e.preventDefault();
                var product=$('#valbox').val();
                alert($('#valbox').val());
                initComparison('mobile_phones',product,'saibrpwx','HGYMDNVKJGSPFQCP');
                });
        </script>
</script>