title: Input fields are repeating in preview page
body: <p>I have three check boxes with two is auto selected and I am displaying the text field with a label which check box is selected.</p>
  
  <p>But after clicking on preview from I am getting input field twice. I mean I am getting four text field instated of two.</p>
  
  <p>There is some issue with my <code>ready script</code>.Would you help me out in this?</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>&lt;!--If any check box clicked then active this script--&gt;
  
  $(function() {
    $(".add_student_input").change(function() {
      if (this.checked) {
        $(".students_items").append('&lt;div class="form-group row ' + this.id + '"&gt;&lt;label class="col-sm-4 col-form-label"&gt;' + $(this).next('label').text() + '&lt;/label&gt;&lt;div class="col-sm-8"&gt;&lt;input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /&gt;&lt;/div&gt;&lt;/div&gt;');
      } else {
        $('.students_items').find('.' + this.id).remove();
      }
    });
    });
  
  &lt;!--end script --&gt;
  $(document).ready( function(){
       $checkbox=$(".add_student_input");
       $checkbox.each(function(){
          var isChecked = $(this).is(":checked");
           if(isChecked) {
              $(".students_items").append('&lt;div class="' + this.id + '"&gt;&lt;label&gt;' + $(this).next('label').text() + '&lt;/label&gt;&lt;input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /&gt;&lt;/div&gt;');
              } else {
                   //check false
                    $('.students_items').find('.' + this.id).remove();
              }
          });
       });
  
      /*form preview*/
  function PrintPreview() {
          var toPrint = document.getElementById('open_in_preview');
          var popupWin = window.open('', '_blank');
          popupWin.document.open();
   popupWin.document.write('&lt;html&gt;&lt;title&gt;::Print Preview::&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="Print.css" media="screen"/&gt;&lt;/head&gt;&lt;body&gt;')
          popupWin.document.write(toPrint.innerHTML);
          popupWin.document.write('&lt;/body&gt;&lt;/html&gt;');
          popupWin.document.close();
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body id="open_in_preview"&gt;
  &lt;input type="checkbox" name="a"  id="class_1" class="add_student_input" data-type="text"  checked&gt;&lt;label for="class_1"&gt;number1&lt;/label&gt;
  &lt;input type="checkbox" name="b"  id="class_2" class="add_student_input" data-type="text" checked&gt;&lt;label class="class_2"&gt;number2&lt;/label&gt;
  &lt;input type="checkbox" name="c"  id="class_3" class="add_student_input" data-type="text"&gt;&lt;label class="class_3"&gt;number3&lt;/label&gt;
  
  &lt;a href="#" class="btn btn-primary" onclick="PrintPreview();"&gt;Preview form&lt;/a&gt;
  &lt;span class="students_items"&gt;&lt;/span&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am getting output like this.</p>
  
  <p><a href="https://i.stack.imgur.com/kOo9i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOo9i.png" alt="enter image description here"></a></p>