title: How to combine two HTML documents?
body: <p>I have two HTML documents. The 1st one will show the table which consists of data. The second code is which will download the data.</p>
  <p>How can I insert the second code into first one?</p>
  <p>I'm attaching the 1st html code below</p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- Favicon --&gt;
      &lt;!--link rel=&quot;shortcut icon&quot; href=&quot;{{url_for('static', filename='images/favicon.ico')}}&quot;--&gt;
  
      &lt;!-- JQuery --&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;&gt;
      &lt;script type = &quot;text/javascript&quot;  src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type = &quot;text/javascript&quot; src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type = &quot;text/javascript&quot;  src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Datatable --&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css&quot;&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type = &quot;text/javascript&quot;  src=&quot;https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type = &quot;text/javascript&quot;  src=&quot;https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type = &quot;text/javascript&quot;  src=&quot;https://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;form method=&quot;post&quot;&gt;
  &lt;!--          &lt;textarea class=&quot;form-control&quot; rows=&quot;5&quot; name=&quot;user_csv&quot;&gt;&lt;/textarea&gt;--&gt;
            &lt;button class=&quot;btn btn-success mt-2&quot;&gt;Show output data&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class=&quot;mt-4&quot;&gt;
            {% if request.method == 'POST'%}
              &lt;table id=&quot;proxies&quot; class=&quot;display table nowrap responsive&quot; style=&quot;width: 100%&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    {% for header in results[0].keys() %}
                      &lt;th&gt;{{header}}&lt;/th&gt;
                    {% endfor %}
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  {% for row in results %}
                    &lt;tr&gt;
                      {% for index in range(0, len(fieldnames)) %}
                        &lt;td&gt;{{row[fieldnames[index]]}}&lt;/td&gt;
                      {% endfor %}
                    &lt;/tr&gt;
                  {% endfor %}
                &lt;/tbody&gt;
              &lt;/table&gt;
            {% endif %}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      $('#proxies').DataTable();
    &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>And the screenshot for the above html is</p>
  <p><a href="https://i.stack.imgur.com/LDvRS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LDvRS.png" alt="enter image description here" /></a></p>
  <p>2nd html code is below, which will download the data</p>
  <pre><code>&lt;h2&gt;Download the output data&lt;/h2&gt;
  &lt;p&gt;
  &lt;a href=&quot;{{url_for('download_file')}}&quot;&gt;Download&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  <p>And the screenshot for the above html is</p>
  <p><a href="https://i.stack.imgur.com/3IVNm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3IVNm.png" alt="enter image description here" /></a></p>
  <p>My expected output screenshot is below</p>
  <p><a href="https://i.stack.imgur.com/6eFzg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6eFzg.png" alt="enter image description here" /></a></p>
  <p><strong>How to combine the two codes?</strong></p>