Click radio button then show submit button

Tags: javascript,jquery,css

Problem :

I am trying to make a click to show submit button using radio button. But i have one question..

I have created this DEMO from codepen.io

In this demo you can see there is a six radio button. (for example:)The first tree radio button is for xx, and second tree radio button is for yy .

I made a submit button for the two parts.When you change any one of the three radio buttons in the first part then the first submit button is automatically display:block; but at the same time the second part submit button is display:block; i don't want to it.

I want to make when first part radio buttons clicked then first part submit button display:block; also same think for second part.

How can i do that anyone can help me in this regard ?

HTML

<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="x" class="yesno rdbtn"/>Yes
  <input type="radio" name="x" class="yesno rdbtn"/>No
  <input type="radio" name="x" class="yesno rdbtn" checked/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>
<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="y" class="yesno rdbtn" checked/>Yes
  <input type="radio" name="y" class="yesno rdbtn"/>No
  <input type="radio" name="y" class="yesno rdbtn"/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>

CSS

.container {
  width:500px;
  margin:0px auto;
  margin-top:50px;
}
.yesno {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 20px;
  border-radius: 14px;
  outline: 0;
  background: #9da6b0;
  -webkit-transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.yesno:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 11px;
  position: relative;
  top: 3px;
  left: 3px;
  -webkit-transition: all 0.15s ease-in-out;
}
.yesno:checked {
  background: #529ecc;
}
.yesno:checked:after {
  left: 13px;
}
.radio_wrp {
  float:left;
  width:500px;
  height:auto;
}
.submitbutton {
  float:left;
  width:50px;
  height:50px;
}
.first {display:none;}
.second{display:none;}

javascript

$(document).ready(function(){
        $('.rdbtn').click(function(){
            $('.first').show();
        });
    });

Note: I know if i change the class name for second part submit button is not display:block; when clicked first part radio buttons.

---

Solution :

Not exactly sure what you need but maybe this will point you in the right direction:

$(document).ready(function(){
    $('.rdbtn').click(function(){
       $('.first').hide(); //if you want to hide one that is already shown
       $(this).closest('.container').find('.first').show();           
    });
});

Demo

It uses $(this) to get the clicked radio, then uses it as an anchor point. It uses closest, which works up the way to find the parent container and then finds the button you want inside only that container.