Добавление элементов формы с помощью javascript до и после проверки в Laravel

У меня есть форма регистрации клиента, в ней есть кнопка для добавления дополнительных полей номера телефона. После отправки формы и проверки ввода на странице необходимо воссоздать те же формы со старыми вводами. Я сделал следующее решение, я хотел бы знать, является ли это эффективным способом, а также не могу ли я создать пустые строки, поскольку в настоящее время он воссоздает все поля, даже если они были пустыми. html

<h3>{{__('Phone Numbers')}} <button type = "button" id = "addPersonPhone">+</button></h3>
<input type = "hidden" name = "personPhoneLines" id = "personPhoneLines" value = "{{(old('personPhoneLines')? old('personPhoneLines') : 1)}}">
<div id = "personPhone">
    <div class = "form-group row">
        <div class = " col-2">
            <label class = "col-form-label col-form-label-sm" for = "personPhoneType-1">{{__('Type')}}</label>
            <select class = "custom-select form-control-sm" id = "personPhoneType-1" name = "personPhoneType-1">
                <option selected value=''>{{__('Choose')}}...</option>
                @foreach ($phonetypes as $phonetype)
                <option value = "{{$phonetype->id}}" {{(old( 'personPhoneType-1')==$ phonetype->id)? "selected":""}}>{{$phonetype->name}}</option>
                @endforeach
            </select>
        </div>
        <div class = "col-3">
            <label class = "col-form-label col-form-label-sm" for = "personCountryCode-1">{{__('Country')}}</label>
            <select class = "custom-select form-control-sm" id = "personCountryCode-1" name = "personCountryCode-1">
                <option selected value = "">{{__('Choose')}}...</option>
                @foreach ($countries as $country)
                <option value = "{{$country->id}}" {{(old( 'personCountryCode-1')==$ country->id)? "selected":""}}>{{$country->name.' (+'.$country->dialing_code.')'}}</option>
                @endforeach
            </select>
        </div>
        <div class = "col-4">
            <label class = "col-form-label col-form-label-sm" for = "personPhoneNo-1">{{__('Number')}}</label>
            <div class = "input-group mb-2">
                <input type = "text" class = "form-control form-control-sm" placeholder = "{{__('Number')}}" name = "personPhoneNo-1" id = "personPhoneNo-1" value = "{{old('personPhoneNo-1')}}">
            </div>
        </div>
    </div>

javascript

var phoneLines = parseInt($("#personPhoneLines").val(), 10);

var phoneRow = $('#personPhone').html();
var oldPersonPhones =["{{old('personPhoneNo-1')}}", "{{old('personPhoneNo-2')}}",
"{{old('personPhoneNo-3')}}", "{{old('personPhoneNo-4')}}", "{{old('personPhoneNo-5')}}"];

for (i = 2; i <= phoneLines; i++) {
    newLine = phoneRow.split('personPhoneType-1').join('personPhoneType-' + i);
    newLine = newLine.split('personCountryCode-1').join('personCountryCode-' + i);
    newLine = newLine.split('personPhoneNo-1').join('personPhoneNo-' + i);

    $("#personPhone").append(newLine);
    $("#personPhoneNo-" + i).val(oldPersonPhones[i-1]);

    }


 $('#addPersonPhone').click(function(){
    if (phoneLines >=5) {
        alert('You cannot add more than 5 lines')
    } else {
        phoneLines = phoneLines + 1;
        newLine = phoneRow.split('personPhoneType-1').join('personPhoneType-'+phoneLines);
        newLine = newLine.split('personCountryCode-1').join('personCountryCode-'+phoneLines);
        newLine = newLine.split('personPhoneNo-1').join('personPhoneNo-'+phoneLines);

    $("#personPhone").append(newLine);
    $("#personPhoneLines").val(phoneLines);

}

});