Fields get blank

Question

This is simple HTML Page with a form which contains some fields, i have scienario that in form there can be multiple fields thats why i created button "Add New Relation" when we click on the button it adds some fields into form but old fields gets empty here is code

document.getElementById('adRe').addEventListener('click',function(){
              
if(document.getElementById('rboxes').childElementCount < 10){
    document.getElementById('rboxes').innerHTML +='<div class="rbox"><div class="rheader"><svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg></div><div class="row"><div class="form-group col-sm-6"><label class="control-label">Name</label><input name="rname[]" class="form-control" required=""></div><div class="form-group col-sm-6"><label class="control-label">Relationship</label><input name="rrelationship[]" class="form-control" required=""></div></div><div class="row"><div class="form-group col-sm-5"><label class="control-label">Telephone</label><input name="rtelephone[]" class="form-control" required=""></div><div class="form-group col-sm-7"><label class="control-label">Address</label><input name="raddress[]" class="form-control" required=""></div></div></div>';
}else{
    alert('You cannot add more than 10 relations');
}
    return false;
});
            
function rclose(a){
    a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}

.rbox .rheader svg{
    height: 39px;
    float: right;
}

    <form>
    	<div class="rboxes" id="rboxes">
            <div class="rbox">
                <div class="rheader">
                    <svg onclick="rclose(this)" aria-hidden="true" data-prefix="far" data-icon="window-close" class="svg-inline--fa fa-window-close fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#7D0E19" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"></path></svg>
                </div>
                <div class="row">
                    <div class="form-group col-sm-6">
                        <label class="control-label">Name</label>
                        <input name="rname[]" class="form-control" required/>
                    </div>
                    <div class="form-group col-sm-6">
                        <label class="control-label">Relationship</label>
                        <input name="rrelationship[]" class="form-control" required/>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-5">
                        <label class="control-label">Telephone</label>
                        <input name="rtelephone[]" class="form-control" required/>
                    </div>
                    <div class="form-group col-sm-7">
                        <label class="control-label">Address</label>
                        <input name="raddress[]" class="form-control" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <a class="btn btn-default" id="adRe">Add New Relation</a>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
    </form>

Answer 1

+= means "Read the value of this, change it, then assign the new result back".

When you do this with innerHTML, you serialise the DOM to HTML, change the HTML, then create a new DOM from the HTML.

Since the current value of a form control is not stored in HTML, it is lost, and the default value is set back.

Do not use innerHTML for this.

Use createElement, appendChild and friends to add new elements to the DOM without overwriting old elements with clones of them.