title: Adding data to dynamic form
body: <p>I am using this dynamic form generation code . <a href="https://www.jqueryscript.net/form/dynamic-forms-fields.html#google_vignette" rel="nofollow noreferrer">https://www.jqueryscript.net/form/dynamic-forms-fields.html#google_vignette</a></p>
  <p>Example : <a href="https://www.jqueryscript.net/demo/dynamic-forms-fields/" rel="nofollow noreferrer">https://www.jqueryscript.net/demo/dynamic-forms-fields/</a></p>
  <p>I have modified the html to take option value as input . I am adding options from an array. I want all the options to be shown from that array , on &quot;Add&quot; new form again the same options should come.</p>
  <pre><code>         &lt;head&gt;
              &lt;meta charset=&quot;UTF-8&quot;&gt;
               &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
               &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
               &lt;title&gt;jQuery Dynamic Forms Plugin Example&lt;/title&gt;
               &lt;link href=&quot;https://www.jqueryscript.net/css/jquerysctipttop.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
           &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css&quot;&gt;
           &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.min.js&quot; integrity=&quot;sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
               &lt;script type=&quot;text/javascript&quot; src=&quot;js/dynamic-form.js&quot;&gt;&lt;/script&gt;
               &lt;style&gt;
           
               .container { margin: 150px auto; }
               h1 { margin-bottom: 50px; }
             &lt;/style&gt;
              &lt;script&gt;
                   $(document).ready(function() {
                      var dynamic_form =  $(&quot;#dynamic_form&quot;).dynamicForm(&quot;#dynamic_form&quot;,&quot;#plus5&quot;, &quot;#minus5&quot;, {
                          limit:10,
                          formPrefix : &quot;dynamic_form&quot;,
                          normalizeFullForm : false
                      });
                      $(&quot;#dynamic_form #minus5&quot;).on('click', function(){
                          var initDynamicId = $(this).closest('#dynamic_form').parent().find(&quot;[id^='dynamic_form']&quot;).length;
                          if (initDynamicId === 2) {
                              $(this).closest('#dynamic_form').next().find('#minus5').hide();
                          }
                          $(this).closest('#dynamic_form').remove();
                      });
                   });
                  function addLocation() {
                      var input_object1 = JSON.parse('[{&quot;id&quot;:1,&quot;name&quot;:&quot;Pune&quot;,&quot;facilityType&quot;:&quot;CAMPUS&quot;,&quot;feedback&quot;:true,&quot;roomStateMode&quot;:2,&quot;asDm&quot;:true,&quot;defaultSlotId&quot;:3,&quot;timezone&quot;:&quot;Asia/Kolk             ata&quot;,&quot;visitorKioskOtpAllow&quot;:true,&quot;visitorKioskQrCode&quot;:true,&quot;defaultSlotStartBefore&quot;:5,&quot;visitorCheckInTemplate&quot;:&quot;&quot;,&quot;visitorPassTemplate&quot;:&quot;visitor-pass-horizontal&quot;,&quot;s             howAttendance&quot;:true,&quot;employeePassTemplate&quot;:&quot;employee-pass-template_1.html&quot;,&quot;employeePassPreapprovedTemplate&quot;:&quot;employee-pass-preapproved-template_1.html&quot;,&quot;employeePa             ssAdminApprovalRequired&quot;:true,&quot;employeePassMaxDays&quot;:15,&quot;employeePassAllowExternalUsers&quot;:true,&quot;employeePassAdminApprovalExternalUsers&quot;:true,&quot;attendanceReportTemplate             &quot;:1,&quot;visitorQuickCheckInTemplate&quot;:&quot;visitor_quick_checkin_email_template.html&quot;,&quot;level&quot;:2,&quot;deskGroupBookingAllow&quot;:true,&quot;deskGroupBookingMaxPeople&quot;:5,&quot;latitude&quot;:18.520             4,&quot;longitude&quot;:73.8567,&quot;city&quot;:&quot;Pune&quot;,&quot;streetAddress&quot;:&quot;&quot;,&quot;rosterMax&quot;:50,&quot;rosterConfigType&quot;:1,&quot;rosterAllowedUptoDays&quot;:30,&quot;deskBookIfRoster&quot;:false,&quot;disableDeskBookShift             Option&quot;:true,&quot;healthDeclarationNotificationPreHours&quot;:2,&quot;healthDeclarationDeskBookingAutoCancelDays&quot;:3,&quot;countryCode&quot;:&quot;25&quot;,&quot;healthDeclarationDisableDeskCheckinWithout             Pass&quot;:false,&quot;deskBookingKioskQrCodeCheckin&quot;:true,&quot;disableDeskBookAmenityOption&quot;:true,&quot;deskBookMaxEndDays&quot;:10,&quot;deskBookAvailableLevelWise&quot;:true,&quot;deskBookingDisableCo             worker&quot;:false,&quot;deskBookingDefaultDuration&quot;:9,&quot;deskBookingCovidVaccinationCertDisable&quot;:true,&quot;visitorQuickInviteAllow&quot;:true,&quot;visitorQuickInviteTitle&quot;:&quot;test&quot;,&quot;visitorQ             uickInvitePurpose&quot;:&quot;Other&quot;,&quot;defaultRoomDisplayTheme&quot;:{&quot;id&quot;:1,&quot;name&quot;:&quot;foo&quot;,&quot;homeImageId&quot;:215,&quot;homeImageChecksum&quot;:&quot;7c858c1e9e6c971cc360141e92fc918e&quot;,&quot;homeFontColor&quot;:&quot;             e5e0ec&quot;}}]') ;  
                      var input_object2 = JSON.parse('[1,8,11,83,37,88,40,42,41]'); 
                      var campush_from_dashboard = null; 
                      // for the edit , it should look for the id
                      $.each(input_object1, function (index, value) {
                          if(campush_from_dashboard == null){
                           if (jQuery.inArray(value.id, input_object2) !== -1) {
                              $('&lt;option&gt;').val(JSON.stringify({
                                   &quot;campusId&quot;: value.id
                               })).text(value.name)
                              .appendTo('[id^=location]');
                           }
                      }
                           $.each(input_object1[index].facilities, function (index1, value1) {
                                if (jQuery.inArray(value1.id, input_object2) !== -1) {
                                  $('&lt;option&gt;').val(JSON.stringify({
                                   &quot;campusId&quot;: value.id,
                                       &quot;buildingId&quot;: value1.id
                               })).text(value.name + value1.name)
                              .appendTo('[id^=location]');
                               }
                               $.each(input_object1[index].facilities[index].facilities, function (index2,
                                   value2) {
                                   if (jQuery.inArray(value2.id, input_object2) !== -1) {
                                      $('&lt;option&gt;').val(JSON.stringify({
                                   &quot;campusId&quot;: value.id,
                                       &quot;buildingId&quot;: value1.id,
                                           &quot;floorId&quot;: value2.id
                               })).text(value.name + value1.name + value2.name)
                              .appendTo('[id^=location]');
                                   }
                               });
                           });
                       });
                  };
           
               &lt;/script&gt;
           &lt;/head&gt;
           
           &lt;body&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;form method=&quot;POST&quot;&gt;
                      &lt;label class=&quot;form-label&quot;&gt;Advanced Properties for Desk Usage Analysis (Optional)&lt;/label&gt;
                      &lt;div class=&quot;form-group&quot; id=&quot;dynamic_form&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;
                              &lt;div class=&quot;col-md-12 &quot;&gt;
                                  &lt;label for=&quot;location&quot; class=&quot;form-label&quot;&gt;Location&lt;/label&gt;
                                  &lt;select class=&quot;form-select&quot; name=&quot;location&quot; id=&quot;location&quot; placeholder=&quot;Location&quot;
                                      aria-describedby=&quot;teamsFeedback&quot; required class=&quot;selectpicker&quot; multiple&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;button-group mt-2 mb-2 col-12&quot;&gt;
                                  &lt;a href=&quot;javascript:void(0)&quot; class=&quot;btn btn-primary &quot; id=&quot;plus5&quot; &gt;Add More Advance Properties&lt;/a&gt;
                                  &lt;a href=&quot;javascript:void(0)&quot; class=&quot;btn btn-danger&quot; id=&quot;minus5&quot;&gt;Remove&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
           
           
           &lt;/body&gt;             
  </code></pre>