title: How to change position of element using jquery
body: <p>I have html stuff as below:</p>
  
  <pre><code>&lt;div class="field-group"&gt;
  &lt;label for="customfield_10102"&gt;select list&lt;/label&gt;
  &lt;select class="select" name="customfield_10102" id="customfield_10102"&gt;
    &lt;option value="-1"&gt;None&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="field-group"&gt;
  &lt;label for="customfield_10103"&gt;select list1&lt;/label&gt;
  &lt;select class="select" name="customfield_10103" id="customfield_10103"&gt;
      &lt;option value="-1"&gt;None&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>any number of option as per configured.
  query: </p>
  
  <ol>
  <li><p>change the position of <code>&lt;select class="select" name="customfield_10103" id="customfield_10103"&gt;</code> to append with <code>&lt;select class="select" name="customfield_10102" id="customfield_10102"&gt;</code> (with 40 px margin) and also have to change both select list's width.</p></li>
  <li><p>After that, remove  <code>&lt;div class="field-group"&gt;&lt;label for="customfield_10103"&gt;select list1&lt;/label&gt;&lt;/div&gt;</code></p></li>
  </ol>
  
  <p>Any one can suggest me , how i could achieve this using JQUERY?</p>
  
  <p>NOTE: just for reference, i need such customization in JIRA  custom field which can be achievable using jquery.</p>
  
  <p>Another related query:</p>
  
  <p>Below is HTML stuff:</p>
  
  <pre><code>&lt;li id="rowForcustomfield_10102" class="item"&gt;
      &lt;div class="wrap"&gt;
          &lt;strong title="select list" class="name"&gt;select list:&lt;/strong&gt;
          &lt;div id="customfield_10102-val" class="value type-select editable-field     inactive"
              data-fieldtype="select" title="Click to edit"&gt;
              final2 &lt;span class="overlay-icon icon icon-edit-sml" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/li&gt;
   &lt;li id="rowForcustomfield_10103" class="item"&gt;
      &lt;div class="wrap"&gt;
          &lt;strong title="select list1" class="name"&gt;select list1:&lt;/strong&gt;
          &lt;div id="customfield_10103-val" class="value type-select editable-field  inactive"
              data-fieldtype="select" title="Click to edit"&gt;
              1 &lt;span class="overlay-icon icon icon-edit-sml" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>I want to remove "rowForcustomfield_10103" and just it's contained a element "customfield_10103-val" place at next to "customfield_10102-val" with some margin.
  so, after that it will look as below:</p>
  
  <pre><code>`&lt;li id="Li1" class="item"&gt;
  
      &lt;div class="wrap"&gt;
          &lt;strong title="select list" class="name"&gt;select list:&lt;/strong&gt;
          &lt;div id="Div1" class="value type-select editable-field inactive"
              data-fieldtype="select" title="Click to edit"&gt;
              final2 &lt;span class="overlay-icon icon icon-edit-sml" /&gt;
          &lt;/div&gt;
           &lt;div id="Div2" class="value type-select editable-field inactive"
              data-fieldtype="select" title="Click to edit"&gt;
              1 &lt;span class="overlay-icon icon icon-edit-sml" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;`
  </code></pre>
  
  <p>Please also let me know on this.</p>
  
  <p>have tried below but unable to change position:</p>
  
  <pre><code>if(AJS.$("rowForcustomfield_10102").length &gt; 0)
  {
  
   AJS.$("customfield_10102-val").after( AJS.$('customfield_10103-val'));
   AJS.$('customfield_10103-val').css({ 'margin-left': '40px','width':'80px' })
   AJS.$('customfield_10102-val').css({ 'width': '80px' });
   AJS.$("#rowForcustomfield_10102 .name").html(null);
   AJS.$("#rowForcustomfield_10103 .name").html(null);
  
  
  }
  </code></pre>