title: change name of select element in HTML form dynamically
body: <p>I have a HTML form that accepts user input (Number of Sectors (LTE)). Based on the user input I clone some elements of the form. Upon submission of the form the hash is passed to a program. I want the names of the keys to be unique for each of the instances (created based on user input). In the current setup I am only able to generate Unique names for keys of the first select element. I want to be able to do the same for the second select element as well. Please suggest. </p>
  
  <p>Current output upon Submission - </p>
  
  <pre><code> {"member"=&gt;"3", "lte_freq1"=&gt;"6", "ru_type"=&gt;"RU", "4_way_rx"=&gt;"Yes", 
        "lte_freq1_1"=&gt;"Yes", "lte_freq1_2"=&gt;"Yes"}
  </code></pre>
  
  <p>Desired output for a input VALUE = 3</p>
  
  <pre><code>{"member"=&gt;"3", "lte_freq1"=&gt;"6", "ru_type"=&gt;"RU", "4_way_rx"=&gt;"Yes", 
        "lte_freq1_1"=&gt;"6","ru_type_1"=&gt;"RU", "4_way_rx_1"=&gt;"Yes" "lte_freq1_2"=&gt;"Yes","ru_type_2"=&gt;"RU", "4_way_rx_2"=&gt;"Yes"}
  </code></pre>
  
  <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;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
        $("button").click(function() {
          var number = document.getElementById("member").value;
          var repeat = $('fieldset');
          var cloned;
          for (i = 1; i &lt; number; i++) {
            cloned = repeat.clone(true);
            current_name = cloned.find('select').attr('name');
            console.log(current_name)
            console.log(cloned)
            cloned.find("*").prop('name', current_name + '_' + i);
            cloned.appendTo('.sector_prop');
          }
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form action="/form" method="post"&gt;
      &lt;div class="textbox"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;legend&gt;&lt;b&gt; RF Parameters&lt;/b&gt;&lt;/legend&gt;
      &lt;br&gt; Number of Sectors (LTE)&lt;br&gt;
      &lt;br&gt;
      &lt;input type="text" id="member" name="member" value=""&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;button&gt;Generate Sector Properties&lt;/button&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="sector_prop"&gt;
        &lt;fieldset&gt;
          Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS for Band 4 and PCS for Band 2)&lt;br&gt;
          &lt;br&gt;
          &lt;div id="freq"&gt;
            &lt;select name="lte_freq1"&gt;
              &lt;option value="6"&gt;850&lt;/option&gt;
              &lt;option value="2"&gt;AWS&lt;/option&gt;
             &lt;option value="4"&gt;PCS&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt; Radio Type (Select "RU" for Rack-mount or RRU for Remote-Radio):&lt;br&gt;
          &lt;br&gt;
          &lt;select name="ru_type"&gt;
            &lt;option value="RU"&gt;RU&lt;/option&gt;
            &lt;option value="RRU"&gt;RRU&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
          &lt;br&gt; 4 way Rx (Select "Yes" or "No"):&lt;br&gt;
          &lt;br&gt;
          &lt;select name="4_way_rx"&gt;
            &lt;option value="Yes"&gt;Yes&lt;/option&gt;
            &lt;option value="No"&gt;No&lt;/option&gt;
          &lt;/select&gt;
          &lt;br&gt;
          &lt;br&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;input type="submit"&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;br&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>