JSFiddle - React, Tailwind, and code Playground

HTML

<form id='theForm'>
            <div class="form-group">
               <div class="rightbox"> <label for='phone'>phone</label></div>
               <div class="leftbox">
                <div class="col-sm-12">
                    <input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
                                        </div></div>
                </div>
                                <div class="form-group">
               <div class="rightbox"> <label for='phone'>mobile</label></div>
               <div class="leftbox">
                <div class="col-sm-12">
                    <input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
                </div></div>
                </div>



                                <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                <div class="btnok">
                <br/>
                    <input type="submit" id="btnSubmit" value="Submit" />

                    </div>
                </div>
            </div>
     </form>

JavaScript

$(document).ready(function(e) {
  
  $('#theForm').submit(function() {
    var txt = $('#btnSubmit');
    txt.val("Next");
    return confirm("Do you want to save the information?");
  });

});