title: innerHTML works on first button click but doesn't work on second click
body: <p>This is the code for my unit converter app. It works on the first click but if you change the number and click the 'convert' button again, it doesn't work. Can anyone please tell me where I am going wrong please?</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>const inputEl = document.querySelector(".input-el")
  
  const btnEl = document.querySelector(".btn-el")
  
  let group1 = document.querySelector(".group-1")
  let group2 = document.querySelector(".group-2")
  let group3 = document.querySelector(".group-3")
  
  btnEl.addEventListener('click', function convert() {
  
    let num = inputEl.value;
  
    const metres = inputEl.value * 3.281
    const feet = inputEl.value / 3.281
  
    const litres = inputEl.value * 0.264
    const gallon = inputEl.value / 0.264
  
    const kilograms = inputEl.value * 2.204
    const pounds = inputEl.value / 2.204
  
  
    group1 = group1.innerHTML += `&lt;p&gt; ${num} meters = ${metres.toFixed(3)} | ${num} = 
      ${feet.toFixed(3)} &lt;/p&gt;`
  
    group2 = group2.innerHTML += `&lt;p&gt; ${inputEl.value} litres = ${litres.toFixed(3)} | 
      ${inputEl.value} = ${gallon.toFixed(3)} &lt;/p&gt;`
  
    group3 = group3.innerHTML += `&lt;p&gt; ${inputEl.value} kilograms = 
      ${kilograms.toFixed(3)} | ${inputEl.value} = ${pounds.toFixed(3)} &lt;/p&gt;`
  
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    box-sizing: border-box
  }
  
  #container {
    width: 550px;
    height: 729px;
    background: #1F2937;
  }
  
  .header {
    width: 550px;
    height: 285px;
    background: #6943FF;
  }
  
  .main {
    width: 550px;
    height: 444px;
    background: #1F2937;
    color: white;
  }
  
  h1 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    padding-top: 33px;
  }
  
  input {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-size: 58px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    border: 2px solid #B295FF;
    border-radius: 5px;
    background: #6943FF;
    width: 117px;
    height: 73px;
    display: block;
    margin: auto;
    margin-bottom: 25px;
    margin-top: px;
  }
  
  button {
    width: 117px;
    height: 42px;
    display: block;
    margin: auto;
  }
  
  div.main&gt;* {
    width: 500px;
    height: 109px;
    background: #273549;
    border-radius: 5px 0px 0px 0px;
    background: #273549;
    margin: 24px 25px;
  }
  
  h2 {
    color: #CCC1FF;
    text-align: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    padding-top: 31px;
  }
  
  p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="header"&gt;
      &lt;h1&gt;Metric/Imperial Unit Conversion&lt;/h1&gt;
      &lt;input class="input-el" type="number"&gt;
      &lt;button class="btn-el"&gt;convert&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="main"&gt;
      &lt;div class="group-1"&gt;
        &lt;h2&gt;Length (Meter/Feet)&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="group-2"&gt;
        &lt;h2&gt;Volume (Liters/Gallons)&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="group-3"&gt;
        &lt;h2&gt;Mass (Kilograms/Pounds)&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>