Displaying specific content in modal based on if statement

I'm trying to display a form in a modal only when two conditions are met. If the conditions are not met, I'm displaying something else. The weird thing here is, if I click the dev block first, I can see the Hello. However, whenever I click the social block first, and go back to clicking the dev block after that, the form shows up. What can I do to fix this?

Html

 <div webstatus="dev" socialmediastatus="Active" class="click-me"></div>
<div webstatus="social" socialmediastatus="Not Active" class="click-me"></div>

Js

    $(document).ready(function() {
            $('.click-me').click(function(e) {
                e.preventDefault();

    //show modal
    $('.servicemodal').modal('show');

//get variables
 var socialmediastatus= $(this).attr("socialmediastatus");
var webstatus = $(this).attr("webstatus");

    //condition
      if(socialmediastatus === 'Not Active' && webstatus === 'social'){

      //show form
      $(".socialmediaform").show();

    }else{
    //append message
    $("somediv").append("Hello.");
    }

    });

});