Make a dynamic hide and show fields using select option(Codeigniter)

Question

I am currently developing a system. I have module called "Request Certificate", in this module; User will choose among the 4 certificates given(certificate 1 and so on), then there will be fields need to fill up before submitting it. But there's a plot twist, fields will be different based on the certificate chosen.

Example: I choice certificate 1, the fields will be shown are: name, age. If I choice certificate 2, the fields will be shown are: name, age and year etc.

In my admin side, there will be a "Requesting for Certificate" in my side bar. In here, the admin can view all the users requested for the certificate then print it(used window.print to print)

NOTE: I used dropdown to display the 4 certificates. Right now, I've done the 1st and 2nd certificate but when I choice the 3rd and 4th certificate, the fields didn't show.

Question: How to create a dynamic hide and show fields depends on the dropdown selected?

View

<select class="form-control" id="certificate" name="certificate">
  <option value="CertificateOne">Certificate 1</option>
  <option value="CertificateTwo">Certificate 2</option>                     
</select>

<div class="cert_select" id="CertificateTwo">
  <div class="col-xs-12">  
    <div class="form-group">
    <hr>
    <h4> Certificate</h4>
      <div class="col-xs-3">
      <label>First Name</label>
      <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
      <div class="text-danger" id="fname_error"></div>
    </div>
    <div class="col-xs-3">
      <label>Middle Name</label>
      <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
      <div class="text-danger" id="mname_error"></div>
    </div>
    <div class="col-xs-3">
      <label>Last Name</label>
      <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
      <div class="text-danger" id="lname_error"></div>
    </div>
</div>

Script

 $(document).ready(function(){
   $('.cert_select').hide();

   $('#certificate').change(function(){
    $('.cert_select').hide();

    $('#' + $(this).val()).show();
  });
 });

I also tried this

View

<select class="form-control" id="certificate" name="certificate">
  <?php foreach($certificates as $row):?>
  <option value="<?= $row->name?>"><?= $row->name?></option>
</select>



   <div class="cert_select" id="<?= $row->name?>">
      <div class="col-xs-12">  
        <div class="form-group">
        <hr>
        <h4> Certificate</h4>
          <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
        <div class="col-xs-3">
          <label>Middle Name</label>
          <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
          <div class="text-danger" id="mname_error"></div>
        </div>
        <div class="col-xs-3">
          <label>Last Name</label>
          <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
          <div class="text-danger" id="lname_error"></div>
        </div>
    </div>
<?php endforeach;?>

It only displayed the first certificate and the fields didn't show

Answer 1

You have forgotten 2 div closures, one for .cert_select and the other for .col-xs-12.

<select class="form-control" id="certificate" name="certificate">
  <option value="CertificateOne">Certificate 1</option>
  <option value="CertificateTwo">Certificate 2</option>    
  <option value="CertificateThree">Certificate 3</option>
  <option value="CertificateFour">Certificate 4</option>
</select>
<div class="cert_select" id="CertificateOne">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 1</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateTwo">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 2</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateThree">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 3</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

<div class="cert_select" id="CertificateFour">
  <div class="col-xs-12">  
    <div class="form-group">
      <hr>
      <h4> Certificate 4</h4>
        <div class="col-xs-3">
          <label>First Name</label>
          <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name">
          <div class="text-danger" id="fname_error"></div>
        </div>
      <div class="col-xs-3">
        <label>Middle Name</label>
        <input type="text" class="form-control" name="mname" id="mname" placeholder="Enter Middle Name">
        <div class="text-danger" id="mname_error"></div>
      </div>
      <div class="col-xs-3">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter last name">
        <div class="text-danger" id="lname_error"></div>
      </div>
    </div>
  </div>
</div>

JS part with jQuery :

$(document).ready(function(){
        $('.cert_select').hide();

    $('#certificate').change(function(){
    $('.cert_select').hide();
    $('#' + $(this).val()).show();
  });
 });

Here is a jsfiddle with the 4 certificates: https://jsfiddle.net/Lqq8ucep/