为什么jquery“closest”在单击类元素时不起作用?

我的页面上有一些由javascript生成的HTML代码。正在生成同一HTML代码的多个部分/实例,并将其填充到页面中。使用名为“openrole”的CSS类隐藏每个HTML部分中的一个div。我需要从下一个“openrole”div中删除隐藏的属性,并在该div上执行slidetoggle()。当单击一个class元素时,我正在尝试查找“openrole”类的下一个元素,但没有运气。 我已经研究和测试了大量的替代品,但仍然没有运气。我希望有人能给我指对方向。

HTLM代码

    <ul id="role_info" class="control-sidebar-menu">         
    </ul>

CSS

 .openrole{
  display:none;
  }

javascript生成的代码

$('#role_info').append(
      '<li>'
     +'<a href="javascript:void(0)">'
     +'<i class="menu-icon fa fa-file-text-o bg-yellow"></i>'
     +'<div class="menu-info">'
     +'<h4 class="control-sidebar-subheading applicantinfo">'+papplicant+plusicon+'</h4>'
     +'<p >'+prole+'</p>'                   
     +'</div>'
     +'</a>'
     +'<div class="col-md-12 openrole">'
     +'<div class="col-md-6">'
     +'<p class="text-left standard-text">Selskapsinformasjon</p>'
     +'<p id="company_address" class="text-left standard-text"><i class=" icon-padding fa fa-home"></i></p>'
     +'<p id="company_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>'
     +'<p id="company_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>'
     +'</div>'
     +'<div class="col-md-6">'
     +'<p class="text-left standard-text">Kontaktperson</p>'
     +'<p id="contact_name" class="text-left standard-text"><i class=" icon-padding fa fa-user"></i></p>'
     +'<p id="contact_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>'
     +'<p id="contact_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>'
     +'<div>'
     +'</div>'
     +'</li>'       
    )

最后,用于触发SlideToggle()的代码

$(document).on('click', '.applicantinfo', function () {

$(this).closest('.openrole').slideToggle();

 });

控制台中没有生成错误消息。我想我只是不知道如何根据HTML的结构编写正确的javascript代码。