title: Set up JSONField in HTML page
body: <p>I've created this model</p>
  <pre><code>class RoadConstruction(models.Model):
      fromCity = models.CharField(max_length=200, null=True)
      toCity = models.CharField(max_length=200, null=True)
      status = models.CharField(max_length=200, null=True)
      date_updated = models.DateTimeField(auto_now_add=True, null=True)
      jsonData = models.JSONField(null=True) 
      profile = models.ForeignKey(Profile, null=True, on_delete=models.SET_NULL)
  </code></pre>
  <p>So when I use Forms and add the form into my html page it generates a text area for jsonData. But here is the catch I know how to like properly define the contents of JSONField but the thing is the JSON is going to be dynamic and it all depends upon the user who is submitting the form. So, I cannot fix the JSONField.</p>
  <p>I'll explain with examples of what I'm expecting with JSONField.</p>
  <p><code>fromCity</code>, <code>toCity</code>, <code>status</code> is self explanatory as it can be very easily implemented with Forms.</p>
  <p>In <code>xyz.html</code> page there will be initially one row of empty form.</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>colA</th>
  <th>colB</th>
  <th>colC</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>valueA</td>
  <td>valueB</td>
  <td>valueC</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>Here suppose the user gave above inputs i.e <code>valueA</code>, <code>valueB</code>, <code>valueC</code>. So I want data to be stored in JSONField as</p>
  <pre><code>[
      {
          'colA': valueA,
          'colB': valueB,
          'colC': valueC,
      }
  ]
  </code></pre>
  <p>Also there will be a ADD button which will add a new row like this and then the user can fill it.
  | colA | colB | colC |
  |------|------|------|
  | valueA1 | valueB1 | valueC1 |
  | valueA2 | valueB2 | valueC2 |</p>
  <p>Then the JSONField should look like this:</p>
  <pre><code>[
      {
          'colA': valueA1,
          'colB': valueB1,
          'colC': valueC1,
      },
      {
          'colA': valueA2,
          'colB': valueB2,
          'colC': valueC2,
      }
  ]
  </code></pre>
  <p>So the user can add rows as per requirements.</p>
  <p>So, how should I implement this type of thing? If directly using the ModelForms then it is showing textarea and I can't expect my website users to know JSON.
  How should I make it dynamic to take as many as values required and store it into the jsondata and then I can easily save it on the DB?</p>
  <p><strong>XYZ.HTML</strong></p>
  <pre><code>&lt;form action=&quot;&quot; method=&quot;POST&quot;&gt;
      {% csrf_token %}
      {{form}}
      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>It shows textarea corresponding to jsonData.</p>