title: Clone django forms with RichTextUploadingField with javascript
body: <p>My forms.description and forms.condition both are not editable , both are using ckeditor RichTextUploadingField , before cloning the inital one is editable .</p>
  <p><strong>models.py</strong>:</p>
  <pre><code>class Teststep(models.Model):
      testcase = models.ForeignKey(TestCasetest , null=True , on_delete= models.CASCADE)
      number = models.CharField(max_length=100 , null = True , blank = True)
      description = models.TextField(blank=True, null=True)
      condition = RichTextUploadingField(config_name=&quot;default&quot;,blank=True,null=True)
      remark = RichTextUploadingField(config_name=&quot;default&quot;,blank=True,null=True)
      modify_history = models.TextField(blank=True, null=True)
      def __str__(self):
          print(self.testcase.name,type(self.testcase.name))
          name  = self.testcase.name+'-('+str(self.number)+')'
          return name
  </code></pre>
  <p><strong>forms.py</strong></p>
  <pre><code>class Teststepform(forms.ModelForm):
      class Meta:
          model = Teststep
          fields = ['description','condition','remark','modify_history']
  </code></pre>
  <p><strong>templates</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
  {{teststepform.media}}
  &lt;table class="table table-striped table-bordered table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;{% trans "number" %}&lt;/th&gt;
              &lt;th&gt;{% trans "description" %}&lt;/th&gt;
              &lt;th&gt;{% trans "condition" %}&lt;/th&gt;
              &lt;th&gt;{% trans "remark" %}&lt;/th&gt;
              &lt;th&gt;{% trans "modfiy_history" %}&lt;/th&gt;            
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="formset-teststep"&gt;
          &lt;tr id="teststepform-list" class=""&gt;
              &lt;td id="number"&gt;&lt;/td&gt;
              &lt;td id="description"&gt;{{teststepform.description}}&lt;/td&gt;
              &lt;td id="condition"&gt;{{teststepform.condition}}&lt;/td&gt;
              &lt;td id="remark"&gt;{{teststepform.remark}}&lt;/td&gt;
              &lt;td id="modify_history"&gt;{{teststepform.modify_history}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
  &lt;div class="col-md-1 col-lg-1"&gt;
      &lt;button type="submit" name="save" value="save" class="btn btn-success btn-lg"&gt;{% trans "Save" %}&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is my javascript to clone <code>&lt;tr id=&quot;formset-teststep&quot;&gt;</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// teststep button
  var add_teststepform = document.getElementById('add_teststepform')
  add_teststepform.addEventListener('click',AddTeststep)
  function AddTeststep(event){
      event.preventDefault()
      const teststep_body = document.getElementById('formset-teststep')
      var teststep_tr_list = document.getElementById('teststepform-list').cloneNode(true)
      var total_lenth = (document.getElementsByClassName('grident-form-teststep')).length
  
      teststep_tr_list.setAttribute('class','grident-form-teststep')
      teststep_tr_list.setAttribute('id','id_teststep_show_'+total_lenth.toString())
      teststep_body.append(teststep_tr_list)
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I am just learning javascript to make my website dynamic</p>