How to remove specific css property from one CSS class in order to apply another class that puts another property on it?

Question

so I have form and that form is styled like this:

#msform input, #msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px;
}

Because I am doing validation of input elements, I want to apply following CSS property border: 3px solid red; with jQuery. The problem is that if I do this $("#make").addClass("invalid"); it doesn't apply border: 3px solid red; but it rather stays same border: 1px solid #ccc; (which is already defined in style for form).

The problem is that I cannot just remove border: 1px solid #ccc; from form style and then apply my class invalid, because there are multiple inputs in my form and when I remove it, it looks ugly + all inputs would be with red border which I obviously don't want like that, I would like to have red borders only on those inputs that are empty.

What I've tried is being more specific in jQuery (with selectors) and removing property but it doesn't work, even after clicking on my next button I still have border like this border: 1px solid #ccc;. Here's my code:

$(".next").click(function(){
var make = $("#make").val();
var model = $("#model").val();
var godina = $("#godina").val();
var engine = $("#engine").val();
var termin = $("#termin").val();
var usluga = $("#usluga").val();

if(make == ""){
    $('#msform input #make').css("border","");
    $('#msform input #make').addClass("validation");
    $("#proizvodjac_validation").addClass("validation");
    $('#proizvodjac_validation').html('whatever');
}



else{
current_fs = $(this).parent();
next_fs = $(this).parent().next();
        
        
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;

current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({'opacity': opacity});
},
duration: 500
});
setProgressBar(++current);
  }

});

Answer 1

Okay, so after a bit of thinking and researching of significance and learning about how and what class will be applied (basically specificity) I realized that moving class .invalid before #msform input, #msform textarea matters. So I don't know if this answer will help anyone else, but I solved it by following way:

1. Copied all properties for #msform input, #msform textarea to .invalid class, and replaced border with my border:3px solid red !important and moved .invalid class before #msform input, #msform textarea in CSS stylesheet.
2. After that I was able to do following in jQuery $("#make").addClass("invalid"); and border of 3px solid red successfully applied to my element.