title: How to handle if a client change some data attributes from the client side?
body: <pre><code>&lt;?php foreach ($communities as $community) { ?&gt;
      &lt;div class=&quot;community-container&quot;&gt;
          &lt;p&gt;&lt;?php echo $community-&gt;Title ?&gt;&lt;/p&gt;
          &lt;button class=&quot;del-btn&quot; data-id=&quot;&lt;?php echo $community-&gt;ID ?&gt;&quot;&gt;Delete&lt;/button&gt;
      &lt;/div&gt;
  &lt;?php } ?&gt;
  
  
  
  
  &lt;Script&gt;
      const deleteBtns = document.getElementsByClassName('del-btn');
      var deleteBtnsArray = Array.from(deleteBtns);
  
      deleteBtnsArray.map(deleteBtn =&gt; {
          deleteBtn.addEventListener('click', () =&gt; {
              const delRequest = new XMLHttpRequest();
              let params = [];
              params = `deleteCommunity=true&amp;communityID=${deleteBtn.dataset.id}`;
              delRequest.open('POST', '/ajax/delete-community');
              delRequest.onreadystatechange = function() {
                  if (delRequest.responseText === 'success') {
                      deleteBtn.parentElement.remove();
                  }
              }
              delRequest.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
              delRequest.send(params);
          })
      })
  &lt;/Script&gt;
  </code></pre>
  <p>I have communities list on my page and each community item has a delete button. Now when I click on a delete button I want to delete related community item.</p>
  <p>But...</p>
  <p>I can inspect these delete buttons from the browser and change it's <code>data-id</code> value to something else(if a <code>data-id</code> of a delete button is 10, I can change it to 1000). Then when I click on that delete button after changing its <code>data-id</code> value from the client side, it will delete some other community instead correct one. (If a community exists with that changed <code>data-id</code> value) because buttons <code>data-id</code> is changed and <code>JavaScript</code> code takes that value to make <code>AJAX</code> request. I can't stop user changing <code>data-id</code> from the client-side. Therefore, How can I handle this situation if user changed data attributes from client side?</p>
  <p><em>Extra information</em></p>
  <p><code>$communities</code> is a array of community objects and each community item has a Name and ID.</p>