Can't check radio button in POPUP FORM

Question

I have a popup form for a button click event. Popup is working properly. But I am unable to check the radio button in the form. Not only the radio button, But also some other input fields.

This is the code so far I have tried. I used z-index to get the difference of layers. It didn't work though.

    $('#call-form').click(function(e){
      $('.req-cal-wrapper').fadeIn();
    });

    $('.req-cal-wrapper').on('click touch', function () {
      $('.inside-form').click(function(e){
        // e.stopPropagation;
        return false;
      });
      $('.req-cal-wrapper').fadeOut();
    });

 .req-cal-wrapper {
      position: fixed;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
      z-index: 999;
      top: 0;
      text-align: left;
    }
    .req-cal-wrapper>div {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
      z-index: 1499;
    }
    .req-cal-wrapper>div>.btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
    }
    .req-cal-wrapper>div>.btn-wrapper ul {
      list-style-type: none;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li input {
      float: left;
    }
    .req-cal-wrapper>div>.btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
        <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>
    </div>

Answer 1

so i took the .inside-form div out of the main div and it works as you want.

 

    $('.req-cal-wrapper').click(function () {
     $('.req-cal-wrapper').fadeOut();
     $('.inside-form').fadeOut();
      });
 
     

.req-cal-wrapper {
      position: relative;
      height: 100vh;
      width: 100vw;
      background: #00000070;
      color: black;
     
      top: 0;
      text-align: left;
    }
    
    .inside-form {
      position: absolute;
      background: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 50px 60px;
      border-radius: 10px;
      font-family: 'Roboto', sans-serif;
      width: 500px;
     
    }
    .btn-wrapper {
      margin-top: 15px;
      font-size: 14px;
      padding-bottom: 35px;
       
    }
.btn-wrapper ul {
      list-style-type: none;
       
    }
  .btn-wrapper ul>li {
      float: left;
        
    }
   .btn-wrapper ul>li input {
      float: left;
        
    }
   .btn-wrapper ul>li p {
      margin-bottom: 0;
      float: right;
      margin-left: 2px;
      margin-right: 35px;
      font-weight: 400;
       
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="req-cal-wrapper">
       
    </div>
     <div class="inside-form">
           <div class="btn-wrapper">
              <ul>
                 <li><input type="radio" name="radio"><p>Phone</p></li>
                 <li><input type="radio" name="radio"><p>Whatsapp</p></li>
                 <li><input type="radio" name="radio"><p>Viber</p></li>
                 <li><input type="radio" name="radio"><p>Email</p></li>
               </ul>
           </div>
      </div>