title: Adding labels to QR codes
body: <p>I have created a QR code generator. The user can create multiple QR codes. </p>
  
  <p>I would like the user to be able to name each QR code (referred to as a checkpoint) by writing the desired checkpoint name in the text <code>input</code> field, clicking the <code>Assign Name</code> button and having the text <code>input</code> field disappear, being replaced by the name the user typed into the field. </p>
  
  <p>The user can input checkpoint names, however, it only works for the first QR code printed, and the <code>label</code> only appears below the QR code. Below is the code that I have so far. Any help or suggestions to help me get the ball rolling on this would be very much appreciated. Thank you! </p>
  
  <p><strong>Note:</strong> If you try to run this to see the QR codes, you will have to enter something in the text field and press generate. They won't appear automatically.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      body {
        font-family: arial, sans-serif;
      }
  
      section {
        margin: 50px auto;
        max-width: 350px;
        text-align: center;
      }
  
      textarea {
        width: 50%;
        height: 50px;
        margin-bottom: 10px;
      }
  
      #size {
        max-width: 64px;
      }
  
      label {
        display: inline-block;
        width: 140px;
        text-align: left;
      }
    &lt;/style&gt;
    &lt;script src="/scripts/snippet-javascript-console.min.js?v=1"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section&gt;
      &lt;h1&gt;QR Code Generator&lt;/h1&gt;
      &lt;p&gt;Enter a URL or some text bellow and hit the Generate button (&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;Enter&lt;/kbd&gt;)!&lt;/p&gt;
      &lt;textarea id="textarea" autofocus&gt;&lt;/textarea&gt;
      &lt;div class="block"&gt;
        &lt;label for="size"&gt;Size (px):&lt;/label&gt;
        &lt;input align="left" id="size" type="number" value="150" min="50" max="500" step="50"&gt;
        &lt;label for="amount"&gt;Amount of Labels:&lt;/label&gt;
        &lt;input align="left" id="amount" type="number" value="1" min="1" max="500" step="1"&gt;
        &lt;button id="genQRcode"&gt;Generate&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="content" style="display: none;"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;p id="demo" align="center"&gt;&lt;/p&gt;
    &lt;script&gt;
      function myFunction() {
        var x = document.getElementById("cpname").value;
        document.getElementById("demo").innerHTML = x;
      }
    &lt;/script&gt;
    &lt;script id="template-qr-code" type="text/html"&gt;
      &lt;p&gt; &lt;img id="qrcode" src="{{src}}" /&gt;&lt;/p&gt;
      &lt;label for="checkpoint"&gt; Checkpoint Name:&lt;/label&gt;
      &lt;input id="cpname" type="text" value=""&gt;
      &lt;button onclick="myFunction()"&gt;Assign Name&lt;/button&gt;
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      window.addEventListener('load', function() {
        var textarea = document.getElementById("textarea"),
          content = document.getElementById("content"),
          amount = document.getElementById("amount"),
          qrTemplate = document.getElementById('template-qr-code');
  
        function genQRcode() {
          var data = encodeURIComponent(textarea.value),
            size = document.getElementById("size").value,
            chart = "http://chart.googleapis.com/chart?cht=qr&amp;chs=" + size + "x" + size + "&amp;choe=UTF-8&amp;chld=L|0&amp;chl=" + data;
          if (data === "") {
            alert("Please enter valid data!");
            textarea.focus();
            content.style.display = "none";
          } else {
            for (var i = 0; i &lt; amount.value; i++) {
              var qrSrc = qrTemplate.innerHTML;
              qrSrc = qrSrc.replace(new RegExp('{{src}}', 'g'), chart);
              qrSrc = qrSrc.replace(new RegExp('{{i}}', 'g'), i);
              content.insertAdjacentHTML('beforeEnd', qrSrc);
            }
            content.style.display = "";
          }
        }
  
        document.getElementById("genQRcode").addEventListener("click", genQRcode);
        document.addEventListener("keydown", function(e) {
          if (e.ctrlKey &amp;&amp; e.keyCode == 13) {
            genQRcode();
          }
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>