JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<form role="form" id="main_form" method="post">
   <div class="form-group">
   	<label for="breach">What was the breach which prompted the charge?</label>
	<select class="form-control" id="breach" name="breach" >
  		<option value=""> -- </option>
  		<option value="po">Parking outside designated bay</option>
  		<option value="pl">Parking longer than maximum period permitted</option>
	</select>
	</div>
	<div class="form-group" id="hider2">
	 <label for="overstay">How long did you overstay in the car park (to the nearest hour)?</label>
    <input type="number" class="form-control" id="overstay" name="overstay" placeholder="0">
    </div>
    
  <div class="form-actions">
  <button type="submit" class="btn btn-primary">Submit</button>
  </div>

</form>

JavaScript

$(document).ready(function() {

	$('#breach').change(function() {
 
	 var $index = $('#breach').index(this);
 
	 if($('#breach').val() == 'pl') { //if this value is NOT selected
	 $('#hider2').show(); //this field is hidden
	 } 
	 else {
	 $('#hider2').hide();//else it is shown
 
	 }

   }).trigger('change');
   
   
    $('#main_form').formValidation({
		framework: 'bootstrap',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			breach: {
				validators: {
					notEmpty: {
						message: 'This field is required and cannot be empty'
					}
				}
			},
			overstay: {
				validators: {
					notEmpty: {
						message: 'This field is required and cannot be empty'
					},
					numeric: {
						message: 'This field must only contain numbers'
					}
				}
			}
		}
	});
  });