title: How to add an ID using with the class name in multiple tags?
body: <p>For example, we have an HTML tag:</p>
  
  <pre><code>&lt;div class="box"&gt;This is a box&lt;/div&gt;
  </code></pre>
  
  <p>We are using the div tag class name <code>box</code> and add an <code>id="box"</code> in the same <code>div</code> tag. The output is:</p>
  
  <pre><code>&lt;div id="box" class="box"&gt;This is a box&lt;/div&gt;
  </code></pre>
  
  <p>We can achieve the changes with the code below for a single tag:</p>
  
  <pre><code>document.getElementsByTagName("div")["class", "box"].setAttribute("id", "box")
  </code></pre>
  
  <p>But if we don't know or we have multiple classes in the HTML element, how to add <code>id</code> to all the tags?</p>
  
  <p>Example: </p>
  
  <pre><code>&lt;div class="box"&gt;Hello World&lt;/div&gt;
  &lt;div class="box--red"&gt;Hello World&lt;/div&gt;
  &lt;div class="box--blue"&gt;Hello World&lt;/div&gt;
  &lt;div class="box--green"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>Output should be like below:</p>
  
  <pre><code>&lt;div id="box"&gt;Hello World&lt;/div&gt;
  &lt;div id="box--red"&gt;Hello World&lt;/div&gt;
  &lt;div id="box--blue"&gt;Hello World&lt;/div&gt;
  &lt;div id="box--green"&gt;Hello World&lt;/div&gt;
  </code></pre>