I'm trying to make a menu builder like wordpress. I have something like this in the pic. ( https://prnt.sc/podhpu ). I enter a value in the left side then click button "Menü Ekle - eng. Add Menu" But value goes empty.
I tried to transfer the value into a variable called "x". Then on click i tried to send x in value"" but it is not working. I think it needs something like trigger before sending it but i do not know exactly.
HTML Code:
<div class="kt-portlet__body">
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control menu-url" value="" placeholder="Menü başlığını giriniz.">
</div>
<div class="form-group">
<label>Başlık</label>
<input type="text" class="form-control menu-title" value="" placeholder="Menü bağlantı adresini giriniz.">
</div>
Menü Ekle
</div>
Javascript Code:
$(function(){
var x = $('.menu-url').val();
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
' <div class="menu-item">\n' +
' <a href="#" class="delete-menu">\n' +
' <i class="fa fa-times"></i>\n' +
' </a>\n' +
' <input type="text" name="title[]" placeholder="Menü Adı">\n' +
' <input type="text" name="url[]" val="'+ x +'" placeholder="Menü Linki">\n' +
' </div>' +
'<div class="sub-menu"><ul></ul></div>\n' +
' Alt Menü Ekle\n' +
' </li>');
e.preventDefault();
});
I want to transfer entered value when i click to "add menu" button.
value is true attribute not val.
and you forget a bracket too.
$(function(){
var x = $('.menu-url').val();
$('#add-menu').on('click', function (e) {
$('#menu').append(
`<li>
<div class="menu-item">
<a href="#" class="delete-menu">
<i class="fa fa-times"></i>
</a>
<input type="text"
name="title[]"
placeholder="Menü Adı">
<input type="text"
name="url[]"
value="${x}"
placeholder="Menü Linki">
</div>' +
<div class="sub-menu"><ul></ul></div>
Alt Menü Ekle </li>`);
e.preventDefault();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="menu-url" value="i am here"
placeholder="menu url">
<button id="add-menu">add menu</button>
<div id="menu"></div>
Related
i want to create form when there will be possibility to add/remove additional selection rows, but all of this new selection should have possibility to show DIV depends on selected option.
Everything is working fine for first row which is loaded with page, DIV is showing input form, normal text or another selection (this one not need to show anything in additional DIV) based what we choosed.
But for added rows nothing happens after selection.
Any idea how to fix it or use another solution?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
<form>
<div class="">
<div class="col-lg-10">
<div id="row">
<div class="input-group m-3">
<select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select> with
<div id="values"></div>
<div class="input-group-prepend" style="margin-left: 20px;">
<button class="btn btn-danger" id="DeleteRow" type="button">
<i class="bi bi-trash"></i>
Delete row
</button>
</div>
</div>
</div>
<div id="newinput"></div>
<br />
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD row
</button>
</div>
</div>
</form>
</div>
$("#rowAdder").click(function () {
newRowAdd =
'<div id="row">' +
'<div class="input-group m-3">' +
'<br /><select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
' with ' +
' <div id="values"></div>' +
' <div class="input-group-prepend" style="margin-left: 20px;">' +
' <button class="btn btn-danger"' +
' id="DeleteRow" type="button">' +
' <i class="bi bi-trash"></i>' +
' Delete row'+
' </button> </div>' +
'</div> </div>';
$('#newinput').append(newRowAdd);
});
$("body").on("click", "#DeleteRow", function () {
$(this).parents("#row").remove();
})
Example:
http://jsfiddle.net/3th96bac/
The main problem is that you are having multiple elements with the same Id. Id must be unique.
Second you'r $(".type").change(function() { will not get triggered by the newly added elements.
Demo
$(document).ready(function() {
$(document).on("change", ".type", function() {
var val = $(this).val();
if (val == "id") {
$(this).next(".values").html("<select><option>First option</option><option>Second Option</option></select>");
} else if (val == "client") {
$(this).next(".values").html("<input value='Example input' />");
} else if (val == "file") {
$(this).next(".values").html("normal text");
}
});
});
$("#rowAdder").click(function() {
newRowAdd =
'<div class="row">' +
'<div class="input-group m-3">' +
'<br /><select class="custom-select custom-select-sm type" name="test" id=""><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
' with ' +
' <div class="values"></div>' +
' <div class="input-group-prepend" style="margin-left: 20px;">' +
' <button class="btn btn-danger DeleteRow"' +
' id="" type="button">' +
' <i class="bi bi-trash"></i>' +
' Delete row' +
' </button> </div>' +
'</div> </div>';
$('#newinput').append(newRowAdd);
});
$("body").on("click", ".DeleteRow", function() {
$(this).closest(".row").remove();
})
<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#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
<form>
<div class="">
<div class="col-lg-10">
<div class="row">
<div class="input-group m-3">
<select class="custom-select custom-select-sm type" name="test" id="">
<option>select one</option>
<option value="id">ID:</option>
<option value="client">Client:</option>
<option value="file">File:</option>
</select> with
<div class="values"></div>
<div class="input-group-prepend" style="margin-left: 20px;">
<button class="btn btn-danger DeleteRow" id="" type="button">
<i class="bi bi-trash"></i>
Delete row
</button>
</div>
</div>
</div>
<div id="newinput"></div>
<br />
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD row
</button>
</div>
</div>
</form>
</div>
Please check below working link for your question.
http://jsfiddle.net/kairavthakar2016/nkrqahpf/11/
Please modify your HTML and instead of ID please use the class and replace the jQuery with class name in the above mentioned example
What i'm trying to do is to create a bike booking method. On my map i have different markers which represent different locations and when clicking the marker a pop-up opens. I'm trying to set a button in the pop-up which on click to send me to the Booking page, but somehow i need to know from which 'Station' the user wanted to book a bike. I'm not entirely sure how to do that, but here is what i tried so far.
Here is where my button is set in pop-up :
else {
contentString[i] = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h2 id="firstHeading" class="firstHeading">' +
data[i].name +
'</h2>' +
'<div id="bodyContent">' +
'<p><h6> Biciclete: </h6>' +
data[i].nrOfBikes +
'<div> Biciclete Libere:' + data[i].nrOfAvailableBikes + ' </div>' +
'<div><input type="submit" id="' + data[i].id + '" value="Make a reservation" class="btn btn-outline-warning" onClick="SendToReservation(this)"></div>';
}
Here is how i'm trying to send to the C# method:
function SendToReservation(button) {
$.post("/Reservation/Reservation?id=" + $(button)[0].id,
function (data, status) {
if (status == "success") {
smth smth;
}
});
}
Here is how my Booking page is rendered:
public ActionResult Reservation()
{
return View();
}
And after completing the form it should come to another method:
[HttpPost]
public ActionResult Reservation(params){
do smth here
}
And here is how my Booking page looks like:
<div class="row text-center">
<div class="col-md-4">
<form asp-action="Reservation">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="UserFirstName" class="control-label"></label>
<input asp-for="UserFirstName" class="form-control" />
<span asp-validation-for="UserFirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="UserSurname" class="control-label"></label>
<input asp-for="UserSurname" class="form-control " />
<span asp-validation-for="UserSurname" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="IdentityCardNumber" class="control-label"></label>
<input asp-for="IdentityCardNumber" class="form-control" />
<span asp-validation-for="IdentityCardNumber" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="StartTime" class="control-label"></label>
<input asp-for="StartTime" class="form-control" />
<span asp-validation-for="StartTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="EndTime" class="control-label"></label>
<input asp-for="EndTime" class="form-control" />
<span asp-validation-for="EndTime" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-outline-success" />
<a asp-action="UserMap" asp-controller="UserMap" class="btn btn-outline-dark">Back to List</a>
</div>
</form>
</div>
</div>
Any idea on how i should store the station id in order to be used in the Reservation controller?
I have some code to order a few elements (input fields) and would like to store the sort order in my database. Sorting works and the ids are shown in the correct order when inspecting element, but when I add a new input field all ids are updated and ordered in ascending order instead of the order I sorted them in before adding a new input.
Example:
I add three fields and have them like:
1
2
3
I drag 3 to the first place so I have:
3
1
2
But then I add a new field and the order changes to:
1
2
3
4
Instead of
3
1
2
4
This is my HTML at the moment:
<button id="addcategory" class="btn btn-success btn-lg waves-effect btnadd">Extra categorie</button>
<form id="lijstform">
<div class="row">
<div class="col-md-8">
<label class="lijstnaamtitle">Lijst naam</label>
<label class="displaynonecoid" id="coid"><?PHP echo $getbedrijfinfo['id']; ?></label>
<input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
</div>
</div>
<div id="dynamic_field">
<div class="row sortwrap" id="1">
<div class="col-md-8">
<input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput" />
<i class="mdi mdi-sort dragndrop"></i>
<div class="questionlist questionwrap">
<div class="row">
<div class="col-md-8">
<button class="btn btn-success questionbutton">Extra vraag</button>
<input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</form>
<div class="lijstresult">
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-success inspectiebutton lijstbutton">Opslaan</button>
</div>
</div>
And this is my jquery code to sort fields, add new fields and update the ids:
// HTML template for new fields
const template =
'<div class="row sortwrap">'+
' <div class="col-md-8">'+
' <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />'+
' <i class="mdi mdi-sort dragndrop"></i>'+
' <div class="questionlist questionwrap">'+
' <div class="row">'+
' <div class="col-md-8">'+
' <button class="btn btn-success questionbutton">Extra vraag</button>'+
' <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />'+
' </div>'+
' <div class="col-md-4">'+
' </div>'+
' </div>'+
' </div>'+
' </div>'+
' <div class="col-md-4"> '+
' <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>'+
' </div> '+
'</div>';
const vraagTemplate =
'<div class="row" id="question">' +
' <div class="col-md-8">' +
' <input type="text" name="question[]" class="form-control name_list questioninput" />' +
' </div>' +
' <div class="col-md-4">' +
' <button class="btn btn-danger btn_remove">X</button>' +
' </div>' +
'</div>';
// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
$('#input-field-id').val($('#input-field-id').val() + 'more text');
// Sortable code
let df = $('#dynamic_field');
df.find('input[name^=cat]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});
df.find('.questionlist').each(function() {
$(this).find('input[name^=qu]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
});
});
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
let $ql = $(this).closest('.questionlist');
$ql.append($(vraagTemplate));
updatePlaceholders();
});
// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
$(this).closest('.row').remove();
updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
$('#dynamic_field').append(t);
updatePlaceholders();
});
$(function() {
$('#addcategory').trigger('click');
$('#question').sortable({
connectWith: '#question'
});
$('#dynamic_field').sortable({
cancel: '.questionwrap, input',
placeholder: "ui-state-highlight"
});
});
This is the id I am talking about:
df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});
Try to set id and placeholder if it not exist.
df.find('input[name^=cat]').each(function(i) {
if (!this.placeholder)
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
if (!this.id)
$(this).attr("id", i + 1 + "-order");
});
I have an option field with by default 2 option. I have a button "Add more Option", this will add a input field (containing minus button to remove) dynamically.
I want to remove the particular input field when user clicks minus button.
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label for="options">Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>
Here is the script -
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").click(function(){
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
});
I tried this -
$(".input-group").click(function(){
const id = this.id;
$("#id").remove();
});
Please suggest. Any other way to do this will also be fine.
Use classes instead of worrying about incrementing ID's. That approach gets too complicated to manage sometimes and it isn't needed at all
Simplified append html with new class remove-btn instead of id on button:
$("#optionsList").append
('<div class="input-group"><input><button class="btn btn-danger remove-btn" type="button"></button></div>');
Delegated event listener for any .remove-btn added to dom in future
$(document).on('click', '.remove-btn', function(){
// "this" is current button event occurs on
$(this).closest('.input-group').remove()
})
Firstly don't use id's in dynamically created elements if you are not going to change it's value and end up with multiple elements with the same ID instead use classes. ie.
class="removeBtn'
Next for dynamically created elements use event bubbling to attach events
$("body").on("click", ".removeBtn", function(){
$(this).closest(".input-group").remove();
});
Because you add on the fly the new button you need to delegate the click event to the document:
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
This part: ".input-group button" means: listen for click event related to button element inside an input-group
The closest used to get the parent div to be removed.
The snippet:
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").on('click', function(e) {
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +
'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +
'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +
'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-success" name="button">Submit</button>
</div>
</form>
</div>
Try with the below code. Hope it helps.
var counter = 1;
$(document).on('click', 'button#moreOptions', function(){
$("#optionsList").append
('<div class="input-group" style="padding:5px;"><input type="text" class="form-control" placeholder="New option field '+ counter +'"><i class="input-group-btn"><button class="btn btn-danger btn-minus" type="button"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
counter++;
});
$(document).on('click', 'button.btn-minus', function(){
$(this).parents('div.input-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>
Add a onclick handler when you generate your button as following :
$("#removeBtn" + optionNo + "").click(function()
{
$("#inputField" + optionNo + "").remove();
});
I have a text box and a button , I writed a script that when clicked on button , create new textbox and Add it to form .
but when I have text Like 32 bit and clicked on button It created a textbox with value like 32 . I get inspect element and result was :
<input type="text" name="Options" class="field-input add-more" value="32" bit="">
my script:
$("#add-more").click(function(e){
e.preventDefault();
var text = $("#more-text");
var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
$("#frm-fields").append(newTag);
text.val("");
});
please see below example .
$("#add-more").click(function(e){
e.preventDefault();
var text = $("#more-text");
var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
$("#frm-fields").append(newTag);
text.val("");
});
<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="row " id="div-fields">
<div class="col-lg-12">
<div class="form-horizontal" id="frm-fields-options">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="more-text" />
<div class="input-group-addon">
<span class="btn btn-sm btn-success" id="add-more">+</span>
</div>
</div>
</div>
<div id="frm-fields" class="row">
</div>
</div>
</div>
</div>
Use jQuery method .val() to set text by converting HTML string in to a jQuery object.
//Create a jQuery object
var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');
//Set the text and append to form
$("#frm-fields").append(newTag.find('input').val(text.val()).end());
$("#add-more").click(function(e) {
e.preventDefault();
var text = $("#more-text");
var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');
$("#frm-fields").append(newTag.find('input').val(text.val()).end());
text.val("");
});
<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="row " id="div-fields">
<div class="col-lg-12">
<div class="form-horizontal" id="frm-fields-options">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="more-text" />
<div class="input-group-addon">
<span class="btn btn-sm btn-success" id="add-more">+</span>
</div>
</div>
</div>
<div id="frm-fields" class="row">
</div>
</div>
</div>
</div>
You forgot to include the double-quotes:
$("#add-more").click(function(e){
e.preventDefault();
var text = $("#more-text");
$("#frm-fields").append('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value="' + text.val().replace(/\"/g, '"') + '" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');
text.val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"/>
<div class="row " id="div-fields">
<div class="col-lg-12">
<div class="form-horizontal" id="frm-fields-options">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="more-text" />
<div class="input-group-addon">
<span class="btn btn-sm btn-success" id="add-more">+</span>
</div>
</div>
</div>
<div id="frm-fields" class="row">
</div>
</div>
</div>
</div>
This line is not balanced .Opening and closing quotes for value attribute is not proper.
'<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' />
Also you need check there is an empty space between quotes is this line
$("#more-text").val(" ");
JS
$("#add-more").click(function(e){
e.preventDefault();
var text = $("#more-text").val();
console.log(text);
var newTag = '<div class="col-lg-3">'+
'<input type="text" name="Options" class="field-input add-more" value="'+text+'"/>'+
'<span class="btn-sm btn-danger remove-me field-input">x</span>'+
'</div>';
$("#frm-fields").append(newTag);
$("#more-text").val(" ");
});
JSFIDDLE
You have to put a "" quotes around your value attribute as the value is space separated:
value="'+ text.val() + '"