title: dynamically change id of input field when click the button
body: <p>I have a <code>div</code>, and in that <code>div</code> I have form like two input fields with respective id's, like the one shown below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function(){
          $('#btn1').click(function(){
              var $div = $('div[id^="div"]:last');
              var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
              var $klon = $div.clone().prop('id', 'div'+num );
              $div.after( $klon);
  
          });
      }); 
      &lt;/script&gt;
      &lt;body&gt;
      &lt;button type = "button" id = "btn1" &gt;submit &lt;/button&gt;
      &lt;div id = "div1"&gt;
      &lt;h4&gt;&lt;b&gt;Trace 1 &lt;/b&gt;&lt;/h4&gt;
        &lt;form&gt;
            &lt;table&gt;
                &lt;tbody&gt;
                   &lt;tr&gt;
                       &lt;td&gt;&lt;label&gt;X Axis:  &lt;/label&gt;&lt;/td&gt;                                               
                       &lt;td&gt;&lt;input type="text" name="t1_x_axis" id="t1_x_axis" size="50"&gt;&lt;/td&gt;                                         
                    &lt;/tr&gt;                                                                             
                    &lt;tr&gt;
                       &lt;td&gt;&lt;label&gt;Y Axis:  &lt;/label&gt;&lt;/td&gt;
                       &lt;td&gt;&lt;input type="text" name="t1_y_axis" id="t1_y_axis" size="50"&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
         &lt;/form&gt;  
    &lt;/div&gt; 
  
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Here my query is when click the button I need to display this <code>div</code> along with form, how many times I click that button that many times the <code>div</code> will display one by one <em>with different id in div and two input field id</em> also should change.</p>
  
  <p>For instance if I click the button 5 times it should display 5 times and those <code>div</code> id and field id should be different </p>
  
  <p>Expected output:</p>
  
  <pre><code> Trace 1
         X axis:   
         Y axis:
      Trace 1
         X axis: 
         Y axis:
      Trace 1
         X axis: 
         Y axis:
      Trace 1
         X axis: 
         Y axis:
      Trace 1
         X axis: 
         Y axis:
  </code></pre>