I have a form where dynamically, the user can add/delete form inputs. The problem is that in form-group which is hidden, I can't add the attribute required because in submit event, the submit won't happen.
How can I add the attribute required every time i press + button and delete it when I press - button?
I tried this: $('#barcode').prop('required',true); but isn't right because if I press 2 times the + button, I will have 2 inputs with the same id...
var counter = 0;
$('#form1')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#addLine'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="barcode"]').attr('name', 'barcode-' + counter).end()
.find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end()
.find('[name="packer"]').attr('name', 'packer-' + counter).end()
.find('[name="count"]').attr('name', 'count-' + counter).end();
$('#barcode').prop('required', true);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$('#barcode').prop('required', false);
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6">
<form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/>
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" required/>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div id="addLine" class="form-group hide">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" />
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group myTop">
<div class="col-lg-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I miss understood question.try this for + button
if($('#barcode').attr('required') != true){
$('#barcode').attr('required',true);
}
this for - button
if($('#barcode').attr('required')){
$('#barcode').removeAttr('required');
}
Related
On click event, I'm cloning the section which is working fine. I also prepend the remove button when there is new section added.
I have only one issue, i want to remove the prepended button when there is only one section remain.
This is the code
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$('.dateofbirth').prepend($('<div style="height:0;"><a class="delete removeButton" href="#"><i class="fa fa-times"></i></a></div>'));
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="#" id="addChild" name="addchild">Add Child</a>
</div>
</div>
</div>
Can anyone help me with this how can i achieve this?
Thanks in advance.
Make the following changes:
The template should not be a child of the first form--group, it should be a sibling. If not, your dynamically added rows are regarded children of the first row. So move the template out of it, as well as the Add button.
Do not add the HTML for the removal button via code. Instead add the HTML for that button in your static HTML, both in the first row and the template
Every time you add or remove a row, and also at page load, perform the following action:
$(".removeButton").toggle($(".removeButton").length > 2)
This will count the number of delete buttons (including the one that is in the template). If that counts to just two, then hide those buttons, otherwise show them.
Here is a little snippet:
$(document).ready(function() {
$('#taskForm')
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#taskTemplate'),
$clone = $template
.clone(true,true)
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
$(".removeButton").toggle($(".removeButton").length > 2);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form--group');
$row.remove();
$(".removeButton").toggle($(".removeButton").length > 2);
});
$(".removeButton").toggle($(".removeButton").length > 2);
});
.hide { display: none }
.field { margin-left: 20px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name-field row" id="taskForm">
<div class="form--group">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="“first" name="first[]" placeholder="“Firstname”" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="form--group hide" id="taskTemplate">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">First Name</label> <input class="firstname character" name="first[]" placeholder="Voornaam" type="text">
</div>
</div>
<div style="height:0;"><a class="delete removeButton" href="javascript:;"><i class="fa fa-times"></i></a></div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label> <input class="date" name="date[]" onkeyup="dateOfBirth(this.value,'stepbirth')" placeholder="DD / MM / JJJJ" type="text">
</div>
</div>
</div>
<div class="col-lg-12 col-sm-12 col-xs-12">
<a class="btn-success addButton" href="javascript:;" id="addChild" name="addchild">Add Child</a>
</div>
</div>
In a form, I want to create a new form input on enter action. I coded this which is working but the cursor doesn't go to the new created input and stays on the same..
How can I move the cursor to the added input;
var counter = 1;
$('#form')
.on('keydown', function(e) {
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
}
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Try adding $('.form-control:last').focus(); on addInput click event.
Or find input by name as like below. Check the snippet for reference.
var inputName="paleta-"+counter;
$("input[name='"+inputName+"']").focus();
var counter = 1;
document.getElementById("form").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
addInput();
e.preventDefault();
}
}
$('#form').on('click', '.addInput', function() {
addInput();
})
// Remove button click handler
.on('click', '.removeInput', function() {
var $row = $('.form-group').slice(-1);
counter--;
$row.remove();
});
function addInput() {
counter++;
var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
.find('.addInput').removeClass('addInput').addClass('removeInput').end()
.find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
.find('i').removeClass('fa-plus').addClass('fa-minus').end();
$template.insertAfter('.form-group:last');
var inputName = "paleta-" + counter;
$("input[name='" + inputName + "']").focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 col-sm-12">
<form id="form" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" name="paleta-1" tabindex="1">
</div>
<div class="col-md-1 col-sm-1">
<button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row">
<div class="row myTop">
<div class="col-md-1">
<button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.
I am currently having an issue where I want to remove the HTML element the user clicked the detach button and then will be prompted but when they have clicked the OK button in a JQuery dialog box it remove that div element with the row class they just clicked.
The following works if without using JQuery dialog box: $(this).closest('.row').remove();
I am having difficulty replicating this via a JQuery dialog box.
Below is an exmaple and a JSFiddle:
$(document).on("click", ".detach", function() {
var detachvalue = $(this).closest('div').prev().find('input.detachval').val();
$("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).closest('.row').remove();
console.log(detachvalue);
$(this).dialog("close");
}
}
});
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
$(this) in ok: function(){} references the dialog and hence it can't remove the div .row.
Have a reference to the .row during detach.click() and use it on the ok: function(){}.
Here is the updated solution.
$(document).on("click", ".detach", function() {
var $row = $(this).parents('.row');
var detachvalue = $(this).closest('div').prev().find('input.detachval').val();
$("<div title='Important Message'>Are you sure you want to detach?</div>").dialog({
modal: true,
buttons: {
Ok: function() {
$row.remove();
console.log(detachvalue);
$(this).dialog("close");
}
}
});
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<input type="text" class="form-control col-md-4 detachval" placeholder="No number currently">
</div>
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary form-control detach">Detach</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
I have a form inputs and I want to add some extra inputs in the same line when I press the add button (input name2, name3).
I have done this which works if I pressed the add button once. After 2 times the alignment is broken..
var counter6=0;
$('#formType1')
.on('click', '.addButton6', function() {
counter6++;
var $template = $('#dose1 .col-md-1.col-sm-2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template.parent());
// Update the name attributes
$clone
.find('[name="strofes"]').attr('name', 'strofes-' + counter6).end();
var $template = $('#dose2 .col-md-1.col-sm-2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template.parent());
$clone
.find('[name="uesi"]').attr('name', 'uesi-' + counter6).end();
})
// Remove button click handler
.on('click', '.removeButton6', function() {
counter6 = counter6-1;
var $row = $(this).parents('.form-group'),
index = $row.attr('data-dose1-index');
// Remove element containing the fields
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-md-12 col-sm-12">
<form id="formType1" method="post" action="workplan?action=form1S_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-md-4 col-sm-4">
<label style="font-size: 16px; color: #C0506C;">TITLE</label>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name1</label>
<div class="col-md-1 col-sm-2 col-md-offset-1">
<input min="0" step="0.1" class="form-control" name="" required="" type="number">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name2</label>
<div class="col-md-1 col-sm-2 col-md-offset-1">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div id="dose1" class="form-group hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name3</label>
<div class="col-md-1 col-sm-2">
<input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
</div>
<div class="col-md-offset-1"> </div>
<div id="dose2" class="form-group hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
</div>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">name4</label>
<div class="col-md-1 col-sm-2">
<input min="0" step="0.1" class="form-control" name="" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton6"><i class="fa fa-plus"></i></button>
</div>
</div>
</fieldset>
</form>
</div>
</div></div>
The problem is the classes you are using to clone the template. You have to made some changes to your script and your HTML. The changes are mentioned below-
1- Replace first occurrence of $template and $clone with this one
var $template = $('#dose1'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose1-index', counter6)
.insertBefore($template);
2- Replace Second occurrence of $template and $clone with this one
var $template = $('#dose2'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-dose2-index', counter6)
.insertBefore($template);
Here i am getting innerHTML of #dose1 and #dose2 and inserting it before their parent div.
3- In HTML replace #dose2 div with this one
<!----- #dose1--->
<div id="dose1" class="hide">
<div class="col-md-1 col-sm-2 ">
<input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>
<!------- #dose2 ----------->
<div id="dose2" class="hide">
<div class="col-md-1 col-sm-2">
<input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
</div>
</div>