title: Increase width by 100px on each click
body: <p>Straight to the point: When I click the button, <strong>I want the width of the box to increase by 100px, on each click</strong>. Could someone help me to achieve this?</p>
  
  <p>Currently the width of the box goes to 400px when clicking the button, but I want to increase the width by 100px on each click to the button.</p>
  
  <p>You can find the code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var content = document.getElementById("content");
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function() {
      content.style.width = "400px";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
      width: 300px; height: 100px;
      background: lightblue;
      transition: all 1s ease-in-out;
  }
  
  #btn {
      width: 100px; height: 50px;
      background: grey;
      display: flex;
      align-items: center; justify-content: center;
      color: white;
      text-decoration: none;
  }
  
  a {
      color: white;
      text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="btn"&gt;&lt;a href="#"&gt;Click&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>