Can thinkPHP have two identical forms on the same page?

I submitted it using ajax. Why can I submit data in the first form but not the second one? There is no response after clicking submit and no error is reported in the console. The two forms are exactly the same. Why is this?

<code>var oBtn1=document.getElementById('btn1');
var oTxt=document.getElementById('textarea');
oBtn1.onclick=function(){
  oV1=oTxt.value;
  ajax("{:U('zhuye/zhuye')}",oV1,function(str){
    if(str==1){
      window.location.reload();
    }
  });
}
<form>
   <textarea id="textarea" rows="1"></textarea>
   <input type="button" id="btn1" value="提交">
</form>
<form>
   <textarea id="textarea" rows="1"></textarea>
   <input type="button" id="btn1" value="提交">
</form></code>

Reply content:

I submitted it using ajax. Why can I submit data in the first form but not the second one? There is no response after clicking submit and no error is reported in the console. The two forms are exactly the same. Why is this?

<code>var oBtn1=document.getElementById('btn1');
var oTxt=document.getElementById('textarea');
oBtn1.onclick=function(){
  oV1=oTxt.value;
  ajax("{:U('zhuye/zhuye')}",oV1,function(str){
    if(str==1){
      window.location.reload();
    }
  });
}
<form>
   <textarea id="textarea" rows="1"></textarea>
   <input type="button" id="btn1" value="提交">
</form>
<form>
   <textarea id="textarea" rows="1"></textarea>
   <input type="button" id="btn1" value="提交">
</form></code>

getElementById will not continue execution if it finds the first element that meets the conditions, so if your two IDs are the same, you can only get the content of the first form

Isn’t the ID of your textarea duplicated?

This is an obvious mistake. The ID of elements in HTML should be unique.

ID is unique and cannot be repeated.

id is unique on the same page