title: Populate html template content inside modal dynamically using javascript
body: <p>I am trying to populate html template dynamically using javascript</p>
  
  <p>Here is what I am using</p>
  
  <pre><code>window.onload = function() {
      document.getElementById('price_01').innerHTML = price_01;
      document.getElementById('dimension_01').innerHTML = dimension_01;
  }
  </code></pre>
  
  <p>with the global variables defined inside  tags</p>
  
  <pre><code>var price_01 = '$8000';
  var dimension_01 = '10m';
  </code></pre>
  
  <p>This work if the tags are standalone like so:</p>
  
  <pre><code>&lt;div class="w3-container"&gt;
    &lt;table class="table"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;Price:&lt;/td&gt;
            &lt;td id='price_01'&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Dimension:&lt;/td&gt;
            &lt;td id='dimension_01'&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when I try to populate the content inside a modal it doesn't work:</p>
  
  <pre><code>&lt;div class="w3-container"&gt;
    &lt;button onclick="document.getElementById('id02').style.display='block';" class="w3-button w3-black"&gt;More Details&lt;/button&gt;
    &lt;div id="id02" class="w3-modal"&gt;
      &lt;div class="w3-container"&gt;
        &lt;table class="table"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Price:&lt;/td&gt;
                &lt;td id='price_01'&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Dimension:&lt;/td&gt;
                &lt;td id='dimension_01'&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This returns blank. Is there a way to fix this? Is there a more elegant solution than what I am doing? Thanks</p>
  
  <p>Edit: sorry it's not that it doesn't work inside modal, but it doesn't work when you use it both inside and outside modal. Here is the replication on TryIt Editor: </p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FTJIGZ6U0XCK" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FTJIGZ6U0XCK</a></p>