We Keep Coding

Div gets cloned multiple times instead of the required amount

I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->

It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.

Javascript for adding table row after user input

I am trying to create a bill calculator that requires user input of their bill type and cost (i will get on to all the calculations after).
At the minute i have got a bootstrap table which is currently 3 rows.
My question is how do i get a new row for each time the user enters their input?
I have a "Bill type field" where the user would enter the type of bill they have.
Then i have the "Amount" for the user to enter how much it will cost.
Finally i have the "Have Paid?" button where the user would click to finish the bill.
Onclick of that button, i would like a new row to be inserted.
Any help would be very much appreciated.
This is my current HTML:
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content" ">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
Thanks!

Just to start, see following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody id="myGrid">
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
<script>
$(".yesBtn").click(function(){
var name = $("#billType1").val();
var amount = $("#amountType1").val();
$("#myGrid").append("<tr><td>" + name + "</td><td>" + amount + "</td></tr>")
$("#billType1").val("");
$("#amountType1").val("");
});
</script>
</body>
</html>

Let assume that your button has id="havePaidButton" and your table id="billTable" and the fields have ids billType, amount and isPaid, respectively.
Your code in the jQuery should look like this:
$('#havePaidButton').off().on('click', function() {
('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>');
});

Angularjs simple grid Table sort by last week

I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance

Angular :ng-form is getting undefined when view Changed

I did some validation check in my dropdown selection when I delete a row. After saving the value I am redirecting to another view. Again when I am trying to delete a row then form is showing undefined. What am I doing wrong?
my jsp-
<div class="form-group" ng-show="editMode!=''">
<label for="editProductJobFileConfig" class="col-md-2 control-label">Job File Configuration</label>
<div ng-class="{'col-sm-9':editMode!=''}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>Job File Type</th>
<th>Job File Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in editProductJobFileConfig track by $index" novalidate ng-form="jobfileForm">
<td>
<select class="form-control" ng-model="object.key" required ng-change="reValidateJobFileKey(editProductJobFileConfig)" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="some1">some1</option>
<option value="some2">some2</option>
<option value="some3">some1</option>
<option value="some4">some4</option>
<option value="some5">some5</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/>
</td>
<td>
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="deleteFieldMappingDefaults(editProductJobFileConfig,$index)>
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="editProductJobFileConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
my controller-
$scope.deleteFieldMappingDefaults = function(editProductJobFileConfig, index) {
angular.forEach(editProductJobFileConfig, function(fieldMapO) {
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
});
for (var i=editProductJobFileConfig.length-1; i>index; i--) {
editProductJobFileConfig[i].form.jobFileKey = editProductJobFileConfig[i-1].form.jobFileKey;
}
editProductJobFileConfig.splice(index,1);
};
1st time when I delete editProductJobFileConfig holds form and set validity. But once I save my value view is changing, again when I select the same product and try to delete a row it shows form is undefined.

Javascript focus on previous row's first input

I have a form presented in a table and each row has two input fields and in the last row it has two buttons "add-more" and "submit"
<form>
<table>
<tbody>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="1">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="2">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="3">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="4">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
<td class="text-left" style="vertical-align: middle;">
<i class="fa fa-times"></i>
</td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td colspan="3">
<div class="widget_box_footer_section">
<i class="fa fa-plus"></i> Add More
<button type="submit" class="button meduim submit_button place-right" id="operator_submit" tabindex="7">
<i class="fa fa-paper-plane"></i> Submit
</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
when i click on add-more it adds the new row(there can be many rows, i have not included that javascript here i have hard-coded the form with two input rows) with two fields and a cross icon to remove that field.
and to remove that field i have a javascript function as
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').first().remove();
});
It is successfully removing that row, but i dont know where the focus is going , i want to fix this focus issue that when we remove the particular row, focus must go to the previous row's first input field

You need to use:
$(document).on('click','a.remove-operator-code',function() {
vat prevtr = $(this).closest('tr').prev();
if(prevtr.length)
prevtr.find('input:first').focus()
$(this).closest('tr').remove();
});

This will help you..
Demo:http://jsfiddle.net/ajnf988s/
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').prev('tr').find('input[type=text]:first').focus();
$(this).parents('tr').remove();
});