How to remove and add a new ID to a element dynamically.

How to remove and add a new ID to a element dynamically.

Hi, is it possible to change the ID of a element on a click of a button?

For example if I have the following code;

  1. <button id="displayOpt1">Click Here</button>

When " displayOpt1" is pressed I want to change the id to "displayOpt2"  - this would render the displayOpt1 button click redundant.

Thanks in advance.