Add div tag class='input-group px-0'

[lissa]

hi,

I want to add an icon to the right of the username text with code like this:
code works successfully

$("#username").before("<div class='input-group px-0'><input type='text' name='username' id='username' autocomplete='username' value='' placeholder='User Name' class='form-control ew-form-control'><button type='button' class='btn btn-default ew-toggle-username rounded-end' data-ew-action='username '><i class='fa-solid fa-user'></i></button></div>");

but my username text displays two inputs.
how do I insert the input element below into a new div tag with class = 'input-group px-0'

because my input tag is still outside the div tag class = 'input-group px-0'
<input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">

Thank You

[lissa]

My goal is to insert the input tag into class="input-group px-0" above the button

<div class="row gx-0">
 <div class="input-group px-0">
  <button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i> </button>
  </div>

  <input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">
 <div class="invalid-feedback">Please enter username</div>
 </div>

become :
My goal is to insert the input tag into class="input-group px-0" above the button

<div class="row gx-0">
 <div class="input-group px-0">
<input type="text" name="username" id="username" autocomplete="username" value="" placeholder="User Name" class="form-control ew-form-control">
 <div class="invalid-feedback">Please enter username</div>

 <button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i> </button>
 </div>

 </div>

[arbei]

lissa wrote:

$("#username").before("<div class='input-group px-0'>...</div>");

Your code added additional HTML before the existing input#username. You need to use jQuery to select the existing button so that it will be moved to before the existing input#username.

See jQuery(selector), not jQuery(html).

[lissa]

thank you, it's solved

$("#username").wrap("<div class='input-group px-0'></div>" );
$("#username").parent().append('<button type="button" class="btn btn-default ew-toggle-username rounded-end" data-ew-action="username"><i class="fa-solid fa-user"></i></button>');