页面上的第二个表单使用了第一个表单的action属性

我有一个包含两个表单的页面，第二个表单使用第一个表单的action属性。代码:

<!-- mountain sites -->
<form name="form" action="shopsite.php" method="post" id="form">
<!-- sites pass alt tag to shopsite.php -->
<ul id="sites">
<tr>
<li><td class="" id="Hyland"><div><img id="imgHyland" onclick="this.src='radiotower.jpg';clearAck('Hyland');" src="radiotower.jpg" alt="Hyland" class="location" /><br/>Hyland</div></td></li>
</ul>
<div><input type="hidden" name="sitename" id="sitename" value="" /></div>
</form><!-- end first form -->

<!-- non-mountain sites -->
<form name="form-nm" action="shopsite-nm.php" method="post" id="form-nm">
<!-- sites pass alt tag to shopsite-nm.php -->
<ul id="sites">
<li><td class="" id="KMS"><div><img id="imgKMS" onclick="this.src='radiotower.jpg';clearAck('KMS');" src="radiotower.jpg" alt="KMS" class="location" /><br/>KMS</div></td></li>
</tr>
<div><input type="hidden" name="sitename" id="sitename" value="" /></div>
</form><!-- end second form -->

当我点击任何一个表单上的输入(输入是li标签)，它会转到shopsite.php。第二个表单中的输入应该转到shopsite-nm.php。我研究了在一个页面上使用多个表单来调用不同的php页面，并且假设这是可能的，尽管我发现的示例没有使用隐藏输入。我不确定这是不是问题所在。

提前感谢你的帮助:)

编辑:sitename正确地从两个表单传递。

编辑2:如果有更好的方法来构建这个，我愿意接受建议。其思想是，每个表单都显示一个包含其状态的站点列表，当用户单击一个站点时，会显示一个包含有关该特定站点的更详细信息的页面。最初只有一个表单可以显示所有的站点，但是最近添加的新站点需要不同的信息显示，这就是我现在试图用第二个表单来适应的。

$(document).ready(function() {
    $('#Hyland').click(function(e) {
        $.ajax({
            url: 'shopsite.php',
            type: 'POST',
            data: $('#form').serialize(),
            success: function(res) {
                //Do Something here
                console.log(res);
            },
            error: function(error) {
                //Do Something here
                console.log(res);
            }
        });
    });
});