We Keep Coding

Replace button with another button

I am making a CV builder, and I already made a button with jQuery to add and delete a form, but when I add, it just goes down, so I can add more, but the first form stays there, and I cannot delete the first form.
Example
You see how it goes down, and I need a button so I can remove the first one also:
As you can see in the pictures, i add a form, and a form comes up, but the add button moves down, as it should, because I put it aside of the div. But I need to add a red button to delete the first form, if someone wants to.
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>

Consider the following.
$(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
if (!$(this).hasClass("clicked")) {
console.log("Adding Button");
$("<div>", {
class: "input-group-btn"
}).appendTo($(".row:eq(0) .input-group:eq(0)").eq(0));
$("<button>", {
class: "btn btn-danger remove",
type: "button"
}).html("<span class='button ripple-effect' style='background-color: #B31C1C;'>Ukloni</span>").appendTo($(".row:eq(0) .input-group:eq(0) .input-group-btn"));
$(this).addClass("clicked");
}
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
It seems you only want to add the button the first click. We can check to see if a Class exists as a quick check, if it does NOT exists, we can perform the one-time action, and add the Class.
Then it is just a matter of adding the proper elements.

jQuery steps with Bootstrap validator

I have a form which validates with bootstrap validator:
http://1000hz.github.io/bootstrap-validator/
I want to separate this form into steps and have each the inputs in each step validate when the next button is clicked and if it validates, then go to step 2.
I believe this can be achieved if we can combine jQuery steps and Bootstrap validator.
http://www.jquery-steps.com/
Like this comment suggests:
https://github.com/1000hz/bootstrap-validator/issues/491
I have been trying to do this but unsuccessful so far. Is there a way?
I have made a JSFiddle for this:
https://jsfiddle.net/mpLpwt7L/
This is my code so far:
<div class="steps-nav">
<div class="row bs-wizard" style="border-bottom: 0;">
<div class="col-xs-3 bs-wizard-step complete step-active">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
1
</a>
<div class="bs-wizard-info text-center">Vehicle details</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
2
</a>
<div class="bs-wizard-info text-center">Location</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
3
</a>
<div class="bs-wizard-info text-center">Type of Wash</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
4
</a>
<div class="bs-wizard-info text-center">Bills</div>
</div>
</div><!-- end bs-wizard -->
</div><!-- end steps-nav -->
</div><!-- end container -->
</header><!-- end header -->
<main id="main">
<div class="container">
<form role="form" class="order-form" method="post">
<div class="row setup-content" id="step-1">
<div class="steps-inner">
<div class="col-md-12">
<h3>Vehicle Details</h3>
<p>
Tell us what are we washing
</p>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<!--<label></label>-->
<input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_model" class="form-control" data-error="Model is required" placeholder="Model" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="vehicle_color" class="form-control" data-error="Color is required" placeholder="Color" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="plate_number" class="form-control" data-error="Plate number is required" placeholder="Lic Plate" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div><!-- end steps-inner -->
</div><!-- end setup-content -->
<div class="row setup-content" id="step-2">
<div class="steps-inner">
<div class="col-md-12">
<h3>Location</h3>
<p>
Tell us where it is
</p>
<p class="map-address">
<i class="fa fa-map-marker"></i>
<input type="text" name="address" id="address_autocomplete" placeholder="Enter Your Address" />
</p>
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div><!-- end steps-inner -->
</div>
</div><!-- end setup-content -->

I think bootstrap validator isn't the best solution for your needs. Try to use Twitter Bootstrap Wizard which includes wizard + form validation so you can implement it easily.

How to add side panel when using cached pages in Framework7?

I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>

According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});

Sub-menu closing when clicking on top of it

I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!

You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});

The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">

Input-group-btn is floating from right of field

The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator.
I need some assistance in working out what aspect of CSS is affecting the behaviour.
Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<div class="row">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
<span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="description" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
<span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
<span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="assignee" class="col-lg-2 control-label">Assignee</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
<span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="targetDate" class="col-lg-2 control-label">Target Date</label>
<div class="col-lg-8">
<!-- <div class="col-lg-4"> -->
<div class="input-group">
<input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close">
</input>
<span class="input-group-btn">
<!-- " -->
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div> <!--input group -->
<!-- </div> /col-lg-4 -->
</div> <!--/col-lg-8 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div> <!--/col-lg-2 -->
</div>
</div>
<div>
<tt>name = {{vm.submitjobform.name}}</tt><br/>
<tt>desc = {{vm.submitjobform.description}}</tt><br/>
<tt>category = {{vm.submitjobform.category.name}}</tt><br/>
<tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
<tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
</div>
</form>
</div> <!-- content-user div -->
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div> <!-- widget violet -->
</div> <!-- row div -->
</div> <!-- container div -->
</section>
</section>
Thanks
Simon

http://jsfiddle.net/voykuL65/
I assume you're using bootstrap as you import it in your css on your fiddle.
The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.
Another point to remember is always design bootstrap smallest up.
You've got everything
class="col-lg-2"
You might have just been tinkering, but remember to start with xs/sm and move larger.
There is also a stray </input> Kill him as well.