How to find the closest element using jquery

Question

I have searched in SO I found so many examples but mine was little different from all.

1) initially i have a row if the user click save & next button it will say you have 3 fields missing

2) if the user click the addmore button and he did not type any value in the text field then he click the save and next button it should still say 3 fields missing

3) if the user type any one of the field in the cloned row then he click the save and next button validation should happen with my code first two points are working

but the problem is if the user click some more rows and he type in any one of the cloned field then if he click safe and next button the required_Field class was applying in all other field but it should apply only to that row :(

If we can able to find the closest element of the field where the user type then i can able to add required_Field class to those element only

I tried like below

        function additionalvalidation() {
          var myRow = $(".check").length;

          //$(".cloned_field").css("border","1px solid green");
          $(".cloned_field").change(function() {
                var myField = $(".cloned_field").val().length;
            if (myField >= 0) {
              $(".cloned_field").addClass("required_Field");
              debugger;
              $(".cloned_field").prevAll('label').find('span.required-star').removeClass('text-error-red');
              //bind_validation();
            } else {
              $(this).closest(".cloned_field").removeClass("errRed");
              $(".cloned_field").removeClass("text-error-red");
            }
            bind_validation();
            return false;
          });
        }

With my current code i am getting error.

Uncaught TypeError: Cannot read property 'length' of undefined

$(this).closest(".cloned_field").addClass("required_Field");

I tried this also

$(this).closest(".cloned-row1").addClass("required_Field");

Any suggestion for this question

I tried this new one ->

$(this).closest(".cloned_field").css({"color": "red", "border": "2px solid red"});

the color red and red border was applying only for that field not for the row :(

Fiddle link for the reference

Answer 1

@mahadevan try this code. I working

        function additionalvalidation() {
          var myRow = $(".check").length;

          //$(".cloned_field").css("border","1px solid green");
          $(document).on("change",".cloned_field",function() {
          var myField = $(this).val();
          var $clonedDiv  = $(this).closest('.cloned_div');

            if (myField!='') {     
                $clonedDiv.find(".cloned_field").addClass("required_Field");
                $clonedDiv.find(".deg_date").addClass("required_Field");
                $clonedDiv.find(".trans_date").addClass("required_Field");
                $clonedDiv.find(".txt_degreName").addClass("required_Field");


              debugger;
              $(".cloned_field").prevAll('label').find('span.required-star').removeClass('text-error-red');
              //bind_validation();
            } else {
                $clonedDiv.find(".cloned_field").removeClass("errRed");
                $clonedDiv.find(".deg_date").removeClass("errRed");
                $clonedDiv.find(".trans_date").removeClass("errRed");
                $clonedDiv.find(".txt_degreName").removeClass("errRed");

                //$(".cloned_field").removeClass("text-error-red");
            }
            bind_validation();
            return false;
          });
        }