title: How to set the height and width of multiple iframes by form input using jquery?
body: <p>I am trying to set the height and width of multiple iframes by the <strong>H</strong> and <strong>W</strong> text fields on form. I am only able to set the height and width of the first iframe, if I try to set the height and width of a second, third, and so on, the height and width that was entered for those particular iframes are declared as undefined. Any help would be appreciated thanks.</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>$(document).ready(function() {
  
    var max_fields = 10;
    var wrapper = $("#dbForm");
    var add_another = $("#add_another");
    var x = 1;
  
    $(add_another).click(function(e) {
      e.preventDefault();
      if (x &lt; max_fields) {
        x++;
        $(wrapper).append('&lt;div class="form-group file_group"&gt;' +
          '&lt;label for="filename"&gt;Filename:&lt;/label&gt;' +
          '&lt;input type="text" class="form-control filename" style="margin:4px;"&gt;' +
          '&lt;label for="height" style="margin-right:4px;"&gt;H:&lt;/label&gt;' +
          '&lt;input type="text" class="form-control height" name="height" style="margin-right:4px;"&gt;' +
          '&lt;label for="width" style="margin-right:4px;"&gt;W:&lt;/label&gt;' +
          '&lt;input type="text" class="form-control width" name="width" style="margin-right:4px;"&gt;' +
          '&lt;button class="btn btn-danger btnRemoveModule"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt;Remove&lt;/button&gt;&lt;/div&gt;');
      }
      if (x == 1) {$('.btnAddModule').html('Add Module');} 
      else if (x &gt; 1) {$('.btnAddModule').html('Add Modules');}
    });
  
    $('.btnAddModule').click(function(e) {
      $('.filename').each(function(i) {
        if ($(this).val() == "") {e.stopPropagation();} 
        else {
          $('&lt;iframe scrolling="yes" marginwidth="0" marginheight="0" frameborder="1" vspace="0" hspace="0"&gt;')
            .attr('src', $(this).val())
  
  
             // I am setting the height and width here
            .attr('width', $('.width').val() + '%') 
            .attr('height', $('.height').val() + 'px')
  
  
            .appendTo('#dashboard');
  
          $('&lt;input type="hidden" id="position_' + i + '" name="position" value="' + i + '"&gt;').appendTo('#dbForm');
          $('#main_file, #main_width, #main_height').val("");
          $('.file_group:not(first-child)').remove();
          $('.container').hide();
          $('#control_panel').css("display", "block");
        }
      });
      $('iframe').draggable({iframeFix: true});
    });
  
    $(wrapper).on("click", ".btnRemoveModule", function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      x--;
      if (x == 1) {$('.btnAddModule').html('Add Module');} 
      else if (x &gt; 1) {$('.btnAddModule').html('Add Modules');}
    });
  
    $('#close_add_rpt').click(function() {
      $('.container').hide();
      $('#control_panel').css("display", "block");
    });
  
    $('#control_panel').click(function() {
      $('.container').show();
      $('#control_panel').css("display", "none");
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>iframe {
    resize: both;
  }
  
  *:focus {
    outline: none;
  }
  
  input:active,
  input:focus,
  button:focus,
  button:active {
    outline: none!important;
    -webkit-appearance: none!important;
  }
  
  .filename,
  .height,
  .width {
    width: 700px!important;
    outline: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
  }
  
  .filename:active,
  .filename:focus,
  .height:active,
  .height:focus,
  .width:active,
  .width:focus {
    outline: none!important;
    -webkit-appearance: none!important;
  }
  
  .height,
  .width {
    width: 55px!important;
  }
  
  #control_panel {
    margin: 0px auto 20px auto;
    display: block;
    display: none;
  }
  
  .container {
    position: relative;
    background: #f8f8f8;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  
  .container #close_wrap {
    float: right;
    position: relative;
    top: 10px;
  }
  
  .container #close_wrap .glyphicon-remove {
    font-size: 25px;
    color: #d9534f;
  }
  
  .container #close_wrap .glyphicon-remove:hover {
    cursor: pointer;
  }
  
  #main_form_group {
    margin-bottom: 4px;
  }
  
  #dbForm {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
    margin: 0 auto;
  }
  
  #button_wrap {
    width: 250px;
    margin: 0 auto;
  }
  
  .btnAddModule {
    margin-right: 5px;
  }
  
  #add_another {
    margin: 20px auto;
  }
  
  .file_group {
    display: block!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  
  &lt;button id="control_panel" class="btn btn-primary"&gt;Control Panel&lt;/button&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="close_wrap"&gt;&lt;span id="close_add_rpt" class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;h2&gt;Add Modules to Dashboard&lt;/h2&gt;
    &lt;form id="dbForm" class="form-inline" onsubmit="return false"&gt;
      &lt;input type="hidden" name="submitted" value="true"&gt;
      &lt;div id="main_form_group" class="form-group"&gt;
        &lt;label for="filename"&gt;Filename:&lt;/label&gt;
        &lt;input id="main_file" type="text" class="form-control filename" name="filename"&gt;
        &lt;label for="height"&gt;H:&lt;/label&gt;
        &lt;input id="main_height" type="text" class="form-control height" name="height"&gt;
        &lt;label for="width"&gt;W:&lt;/label&gt;
        &lt;input id="main_width" type="text" class="form-control width" name="width"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
    &lt;div id="button_wrap"&gt;
      &lt;button id="add_another" type="submit" class="btn btn-default"&gt;Add Another&lt;/button&gt;
      &lt;button class="btn btn-primary btnAddModule"&gt;Add Module&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="dashboard"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>