clone function is not working on JavaScript

I've created a clone function on html file. But there's a weird error in code. when I put two ending 'div' in same line, the JavaScript code just work fine. but when I beautify html code or put the last ending tag in another line, the JavaScript just doesn't work. please look at the commented line

<body>

<div class="container">
    <div class="col-2 m-3 bg-primary" id="show">working</div>
    <button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>

<div id="error" class="text-danger ml-3"></div>
    <div id="myList" style="list-style-type:none;" class="mt-3">
        <div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2"
                        onclick="removeIt()">X</button>
                </div>
            </div>
        </div></div> <!-- this line is causing issue -->

    <button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>

    
        <div class="form-check">
            <label class="form-check-label" for="numbers">
                Number Of Row
            </label>
            <input type="number" class="form-input" name="" id="numbers" value="1">
        </div>
        <button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
    let error = document.getElementById('error');

    function passNumber(){
        let numbers = document.getElementById('numbers').value;
        for(let i = 1; i <= numbers; i++){
            addElement();
        }
    }
    
    function hide() {
        document.getElementById('show').style.display = 'none';
    }
    function addElement() {
        error.innerHTML = '';
        let item = document.getElementById('myList').lastChild;
        let cln = item.cloneNode(true);
        document.getElementById('myList').appendChild(cln);
    }
    function removeIt() {
        let list = document.getElementById('myList');
        if(list.childNodes.length == 2){
             error.innerHTML=`you cant delete the last input box`;
        }else{
            let length = list.childNodes.length;
            list.removeChild(list.childNodes[length-1]);
        }
    }
</script>

this code works fine. but when I change the code into below lines, then the JavaScript just don't work at all -

<body>

<div class="container">
    <div class="col-2 m-3 bg-primary" id="show">working</div>
    <button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>

<div id="error" class="text-danger ml-3"></div>
    <div id="myList" style="list-style-type:none;" class="mt-3">
        <div>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username"
                    aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2"
                        onclick="removeIt()">X</button>
                </div>
            </div>
        </div>
      </div> <!-- this line is causing issue -->

    <button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>

    
        <div class="form-check">
            <label class="form-check-label" for="numbers">
                Number Of Row
            </label>
            <input type="number" class="form-input" name="" id="numbers" value="1">
        </div>
        <button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
    let error = document.getElementById('error');

    function passNumber(){
        let numbers = document.getElementById('numbers').value;
        for(let i = 1; i <= numbers; i++){
            addElement();
        }
    }
    
    function hide() {
        document.getElementById('show').style.display = 'none';
    }
    function addElement() {
        error.innerHTML = '';
        let item = document.getElementById('myList').lastChild;
        let cln = item.cloneNode(true);
        document.getElementById('myList').appendChild(cln);
    }
    function removeIt() {
        let list = document.getElementById('myList');
        if(list.childNodes.length == 2){
             error.innerHTML=`you cant delete the last input box`;
        }else{
            let length = list.childNodes.length;
            list.removeChild(list.childNodes[length-1]);
        }
    }
</script>

Solution

lastChild is the last child node of any kind, including text nodes. By moving the closing </div> tag, you're adding a text node.

You could use lastElementChild instead to get only the last element in the list.

Here's a simplified example:

console.log(document.getElementById("container1").childNodes.length); // 2
console.log(document.getElementById("container2").childNodes.length); // 3

<div id="container1">
    <div>x</div></div>
<div id="container2">
    <div>x</div>
</div>

Side note: Your HTML is invalid. div elements cannot be direct children of ul elements. ul elements are expected to contain li elements as their only direct (element) children.