You are trying to insert a HTML <button> inside the <input>, you cant do that you cant insert HTML elements inside an <input>

You can insert it after it with .after() or before it with .before()

check this code:

var boxes = $(".row");
var saveBtn = $("<button>").text("complete");
// boxes.before(saveBtn)
boxes.after(saveBtn)
console.log(saveBtn);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="boxes">
        <input class="row 1" type="text">
        <input class="row 2" type="text">
        <input class="row 3" type="text">
        <input class="row 4" type="text">
        <input class="row 5" type="text">
        <input class="row 6" type="text">
        <input class="row 7" type="text">
        <input class="row 8" type="text">
    </div>
</div>

Change this line

var saveBtn = $("<button>").text("complete");

into

var saveBtn = "<button>complete</button>";

This is my code

HTML

<div class="container">
    <div class="boxes">
        <input class="row 1" type="text">
        <input class="row 2" type="text">
        <input class="row 3" type="text">
        <input class="row 4" type="text">
        <input class="row 5" type="text">
        <input class="row 6" type="text">
        <input class="row 7" type="text">
        <input class="row 8" type="text">
    </div>
</div>

JAVASCRIPT

var boxes = $(".row");
var saveBtn = $("<button>").text("complete");
boxes.append(saveBtn)
console.log(saveBtn);

why my button is not showing on my web page?