title: Get data from input using template literals as id
body: <p>I have a program that makes a table using json data. This technique uses template liretals, so i can add rows myself however i want. My problem is that I need to get data from an input, which has a template literal as an id, but the getElementById doesn't allow me to.</p>
  
  <p>I have already tried escaping my brackets, but that doesn't work. I have looked into using a simple index, but i don't know how I could set it up in my function.</p>
  
  <p>Here is the javascript code:</p>
  
  <pre><code>//load JSON file
  var articles = ""
  var txt = ""
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){
    if(xmlhttp.status == 200 &amp;&amp; xmlhttp.readyState == 4){
      articles = xmlhttp.responseText;
      txt = JSON.parse(articles);
  
      processArticles(txt);
  
      processForm(txt);
  
    }
  };
  xmlhttp.open("GET","../articles.json",true);
  xmlhttp.send();
  
  function processArticles(txt) {
  
    var tableStart = `
      &lt;h2&gt;Liste des articles&lt;/h2&gt;
      &lt;form id="formtable"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Article&lt;/th&gt;
          &lt;th&gt;Prix&lt;/th&gt;
          &lt;th&gt;Prix-Retour&lt;/th&gt;
          &lt;th&gt;Quantitée maximale&lt;/th&gt;
          &lt;th&gt;Projet&lt;/th&gt;
          &lt;th&gt;Quantitée&lt;/th&gt;
        &lt;/tr&gt;`;
  
    var tableEnd = `
      &lt;/table&gt;
      &lt;input type="submit"&gt;
      &lt;/form&gt;`;
  
    function articlesTemplate(txt, index) {
        return `
            &lt;tr&gt;
              &lt;td&gt;${txt.ID}&lt;/td&gt;
              &lt;td&gt;${txt.Article }&lt;/td&gt;
              &lt;td&gt;${txt.Prix}&lt;/td&gt;
              &lt;td&gt;${txt.PrixRetour}&lt;/td&gt;
              &lt;td&gt;${txt.QuantiteeMaximale}&lt;/td&gt;
              &lt;td&gt;${txt.Projet}&lt;/td&gt;
              &lt;td&gt;&lt;input type="number" name="quantity${txt.ID}" id="quantity${txt.ID}" min="1" max="5"&gt;&lt;/td&gt;
            &lt;/tr&gt;
        `;
  
    }
  
  
    let mctxt=txt.filter(value=&gt;
      value.Projet=="mc");
      document.getElementById("tablemc").innerHTML = `
        ${tableStart}
        ${mctxt.map(articlesTemplate).join("")}
        ${tableEnd}
        `;
      ;
  }
  </code></pre>
  
  <p>The problem is in the .getElementById of my quantity in this last function.</p>
  
  <pre><code>function processForm(txt) {
    var form = document.getElementById('formtable');
    var quantity = document.getElementById(`"quantity$\\{txt.ID\\}"`);
  
    form.onsubmit = function(e) {
     e.preventDefault();
     console.log("HI");
     console.log(quantity.value);
   };
  
  }
  </code></pre>
  
  <p>I want to be able to collect the quantity of each object selected and also the price of that same object, so that i can make a total price at the end of the table.</p>