title: Jquery add data-rel attribute to all input fields and remove name attribute
body: <p>I need to somehow have data-rel value to input field and remove name from same input field on specific class.</p>
  
  <p>The code i had done so far is working to remove name from that specific field. but i can't add data-rel to that same field.</p>
  
  <p>Here is the code.</p>
  
  <pre><code>$('.vf-sortable-holder').each(function() {
      var empty_sortable = $(this).closest('.option').find('.empty-sortable').find('input');
      var sortable_name = empty_sortable.attr('name');
  
      input.attr('data-rel', sortable_name);
  
      empty_sortable.removeAttr('name');
  
  });
  </code></pre>
  
  <p>So html look like this</p>
  
  <pre><code>&lt;div class="option"&gt;
      &lt;div class="vf-sortable-holder"&gt;
          &lt;div class="empty-sortable hidden"&gt;
          &lt;input type="text" name="example"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="option"&gt;
      &lt;div class="vf-sortable-holder"&gt;
          &lt;div class="empty-sortable hidden"&gt;
          &lt;input type="text" name="example"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So my js code works to remove name attribute but i actually need to change name with data-rel either to remove name from html with js code and add data-rel or somehow to rename name to data-rel in the end i need it to look like this:</p>
  
  <pre><code>&lt;div class="option"&gt;
      &lt;div class="vf-sortable-holder"&gt;
          &lt;div class="empty-sortable hidden"&gt;
          &lt;input type="text" data-rel="example"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="option"&gt;
      &lt;div class="vf-sortable-holder"&gt;
          &lt;div class="empty-sortable hidden"&gt;
          &lt;input type="text" data-rel="example"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>