Add CSS Class to Row Elements If Value Equals - html

Question

Using JQuery I would like to check the value of an input, if it equals Complete I would like to add the Bootstrap class is-valid to that input, and all the other inputs on the same row.
Something like this (pseudo code);
if wb_status_reg = Complete {
// add is-valid to all row inputs / select boxes
}
I should note that sometimes the row will contain a select box, not just text inputs. Also, I'm unable to edit the html as it's being generated by a form builder component (in a CMS).
My code is currently working but I know it's too long and could be improved. In my code i'm showing one form-row but I actually have many more, so I need to duplicate this a few more times.
How can I achieve this in a more efficient way?
jQuery(document).ready(function($) {
var wb_stage_reg = $('#wb_stage_reg');
var wb_status_reg = $('#wb_status_reg');
var wb_date_reg = $('#wb_date_reg');
setIsValid($);
});
function setIsValid($) {
wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>

Answer 1

Something like this:
You need to change ID to class on all fields
Since you cannot, I use the name instead:
$(function() {
$("[name='form[wb_status_reg]']").each(function() {
const $parent = $(this).closest(".form-row");
const complete = this.value === "Complete";
$parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
})
});
.is-valid { color:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>