JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <a href=""><h1 class="font-eagle-light color-white navbar-header__logo home">
        					<svg class="fill-white va-middle" xmlns="http://www.w3.org/2000/svg" width="27" height="77" viewBox="0 0 27 27">
        					</svg>
        					Header
        				</h1></a>
    </div>
  </nav>
  <div class="secondary-bridge">
    <div class="container">
      <form action="/update" id="formwrite">
        <div class="row">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="sortable">
              <div class="panel">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title va-middle">Account Settings
        										<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
        										</h4>
                </div>
                <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      Account Settings
                    </div>
                    <div class="panel-body row fieldpos">
                      <fieldset class="form-group textwide">
                        <label for="email">Email</label>
                        <input...

CSS

@font-face {
  font-family: 'Eagle-light';
  src: url('../fonts/eagle-light-webfont.eot');
  /* IE9 Compat Modes */
  src: url('../fonts/eagle-light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/eagle-light-webfont.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/eagle-light-webfont.woff') format('woff'), /* Pretty Modern Browsers */
  url('../fonts/eagle-light-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/eagle-light-webfont.svg#svgFontName') format('svg');
  /* Legacy iOS */
}

@import url(https://fonts.googleapis.com/css?family=Roboto);

/* ---Mobile Devices--- */

body {
  font-family: 'Roboto', sans-serif;
  color: #77807F;
}

.container {
  width: 75%;
}

.navbar-header svg {
  margin-right: 5px;
}

.navbar-header__logo {
  font-size: 21px;
  margin: 0;
  display: inline-block;
}

.navbar-inverse {
  background-color: #4F5858;
  border: none;
  color: white;
}

.navbar,
.navbar-inverse,
.navbar-fixed-top {
  position: relative;
  display: block;
}

.navbar-form {
  margin: 25px 0;
}

.secondary-bridge {
  background-color: #fff;
  padding-top: 25px;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}

.row {
  margin-bottom: 12px;
  font-size: 13px;
}

.head {
  background: #D9DBDE;
}

.panel {
  border: none;
  box-shadow: none;
}

.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}

.panel-heading.head {
  padding: 20px 0;
  background-color: #E1F2F9;
}

.panel-title {
  font-size: 21px;
  display: block;
  width: 100%;
  color: #4F5858;
  line-height: 1.3;
  font-weight: normal;
}

.panel-collapse {
  margin-top: 20px;
  max-height: 200px;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  overflow-y: hidden;
  display:...

JavaScript

$(document).ready(function(){
	var validated = false,
  		inputC = 0,
  		that;
  jQuery.fn.extend({
    valVal: function() {
      return $(this).each(function() {
      	var input = $(this);
        inputC++;
        if(!$.trim(input.val())){
        	input.closest(".collapse").removeClass("collapse");
        }
      });
    }
  });

	$(".savechanges").on("click", function(){
  	that = $(this);
    console.log(that.parent());
    inputC = 0;
    $(".panel-collapse").addClass("collapse");
  	that.parent().parent().find("input").valVal();
    var collapse = $(".collapse");
    if(collapse.length==inputC){
    	validated = true;
      console.log("yess");
      //Do an AJAX request to server.
    }else{
      console.log("not quite correct yet..");
      //Just for the sample, has no use (yet) in this piece of code
    }
    
  })
	$(".panel-heading").on("click", function(){
  	that = $(this);
  	that.parent().find(".panel-collapse").toggleClass("collapse");
    that.parent().find("input").focus();
  })
})