title: How to set id and name of select control present inside <td> of a HTML table using jQuery?
body: <p>I've following HTML code for table and select control:</p>
  
  <pre><code>&lt;table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped"&gt;
    &lt;thead&gt;
      &lt;tr id="jumbo"&gt;
        &lt;th style="vertical-align:middle"&gt;Products&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Pack Of&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Quantity&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Volume&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Unit&lt;/th&gt;
        &lt;th style="vertical-align:middle"&gt;Rebate Amount&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class="apnd-test"&gt;
      &lt;tr id="reb1_1"&gt;
        &lt;td&gt;
          &lt;div class="btn-group"&gt;
            &lt;select name="" id="" class="form-control prod_list"&gt;
              &lt;option value='1'&gt;Alabama&lt;/option&gt;
              &lt;option value='2'&gt;Alaska&lt;/option&gt;
              &lt;option value='3'&gt;Arizona&lt;/option&gt;
              &lt;option value='4'&gt;Arkansas&lt;/option&gt;
              &lt;option value='5'&gt;California&lt;/option&gt;
             &lt;/select&gt;
           &lt;/div&gt;
         &lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>Now I want to set the name and id of select control from above HTML code to following values:</p>
  
  <pre><code>name="product_id_1[1]"
  id="product_id_1_1"
  </code></pre>
  
  <p>How to achieve this?</p>