comment changer l'arrière-plan de div (comme la barre de progression) lorsque l'utilisateur a fini de saisir un formulaire?

$(document).ready(function() {

	// Loop through each Input field
	$('input[type="text"]').each(function(index, el) {

		// If Input field don't have ID, assign Input Index number as a ID of it's Step dot
		if ($(this).attr('id') == '') {
			$(this).attr('id', index);

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+index+'></div>');
		}

		// If Input field have ID, assign Input ID as a ID of it's Step dot
		else{

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+$(this).attr('id')+'></div>');
		}
	});

	// Check Input field value then change background color if any value in it
	$('input[type="text"]').on('keyup', function(event) {
		event.preventDefault();

		// If input field is not blank, step dot has background color 
		if ($(this).val() != '') {
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').css('background', 'red');
		}

		// If input field is blank, step dot hasn't background color
		else{
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').removeAttr('style');
		}
	});
});

.step-dots div {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: #d9d9d9;
	margin-left: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
	<div class="row">
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group" checked>
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
	</div>
</form>
<div class="step-dots">
</div>

function checkFilled() {
	var inputVal = document.getElementById("textinput");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "red";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}
 
checkFilled();

.step-dots div {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #d9d9d9;
    margin-left: 6px;
}

<form action="">
        <div class="row">
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="textinput" name="text-group" onchange="checkFilled();">
            </div>
         </div>
</form>
<div class="step-dots">
        <div></div>
        <div></div>
        <div></div>
</div>