html - JavaScript how to send different entities but keeping the same id? -

suppose have 2 areas separated div containers, need send id values different areas, locally when function called in container.

extract:

   <script>         document.getelementbyid('compare_name").innerhtml = "changed"; </script>  <div class = "details>      <span id="compare_name">no1</span>      <form id="view-details0">     <input type="button" value="add compare" onclick="add_compare()">     </form> </div>  <div class  = "details">  <span id="compare_name">no2</span>      <form id="view-details0">     <input type="button" value="add compare" onclick="add_compare()">     </form> </div> 

you cannot use same id more 1 element. can use name instead below:

<script>         var x = document.getelementsbyname("compare_name"); for(var = 0; < x.length ; i++){ x[i].innerhtml = "changed";                         } </script>  <div class = "details>      <span id="compare_name" name="compare_name">no1</span>      <form id="view-details0">     <input type="button" value="add compare" onclick="add_compare()">     </form> </div>  <div class  = "details">  <span id="compare_name" name="compare_name">no2</span>      <form id="view-details0">     <input type="button" value="add compare" onclick="add_compare()">     </form> </div>