How to insert <div> </div> between many divs using jQuery (wordpress)?

Question

I need make class 3 and 4 in one line.
I have following existing code, and I tried to add between two divs using append,
but it didn't inset div between divs.
Would you please let me know how to make class 3 and 4 in one line?

Existing code that creted using plugin (class 3 and 4 displays in two lines):

<form class="acfef-form">
     <div class="1"></div>
     <div class="2"></div>
     <div class="3">
          <div class="3-1"><input class="acfef-submit-button" type="submit"></div>
     </div>
     <div class="4"><input class="save-progress-button" name="save_progress" type="submit"></div>
</form>

I want to make like this:

<form class="acfef-form">
     <div class="1"></div>
     <div class="2"></div>
     <div>
           <div class="3">
                <div class="3-1"><input class="acfef-submit-button" type="submit"></div>
           </div>
           <div class="4"><input class="save-progress-button" name="save_progress" type="submit"></div>
     </div>
</form>

Thank you.

Answer 1

As suggested by charlietfl you can use wrapAll to achieve this.Also, other way will be using prev().addBack().wrapAll() this will take previous element from your save-progress and then wrap them in one div.

Demo Code :

 //$("form.acfef-form.acf-form-submit, .save-progress-buttons").wrapAll("<div class='abc'></div>") //or $("form.acfef-form.save-progress-buttons:last").prev().addBack().wrapAll("<div class='abc' />");

 .abc { display: flex; }.abc>div { margin: 10px; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <form class="acfef-form -submit" action="" method="post" autocomplete="disableacf" novalidate="novalidate" data-widget="fc7226d" id="acf-form-fc7226d12597" enctype="multipart/form-data"> <div class="acf-form-data acf-hidden"> <input type="hidden" name="_acf_screen" value="acfef_form"><input type="hidden" name="_acf_post_id" value="12597"><input type="hidden" name="_acf_nonce" value="fb285841f9"><input type="hidden" name="_acf_validation" value="1"><input type="hidden" name="_acf_changed" value="0"><input type="hidden" name="_acf_status" value=""><input type="hidden" name="_acf_form" value="QzNx"><input type="hidden" name="_acf_main_action" value="edit_post"><input type="hidden" name="_acf_screen_id" value="3358"> <input type="hidden" name="_acf_element_id" value="fc7226d"> </div> <div class="acf-fields acf-form-fields -top"> <div class="acf-field acf-field-product-title acf-field-6053b2640eef9 elementor-repeater-item-b95d154" data-name="title" data-type="product_title" data-key="field_6053b2640eef9"> <div class="acf-label"> </div> <div class="acf-field acf-field-textarea acf-field-60bc51af899c4 elementor-repeater-item-b95d154" data-name="extra-request" data-type="textarea" data-key="field_60bc51af899c4"> <div class="acf-label"> <label for="acf-field_60bc51af899c4">ETC</label></div> <div class="acf-input"> <textarea id="acf-field_60bc51af899c4" name="acf[field_60bc51af899c4]" rows="8"></textarea></div> </div> </div> </div> <div class="acf-form-submit"> <div class="acfef-submit-buttons"><input type="submit" class="acfef-submit-button acf-button button button-primary" data-state="publish" value="Submit"></div> </div> <div class="save-progress-buttons"> <input formnovalidate="" type="submit" class="save-progress-button acf-submit-button acf-button button" value="Save Draft" name="save_progress" data-state="revision"></div> </form>