We Keep Coding

Problem in automatic addition of Inputs by selecting the values in Select

Once I select the values determined in the select, the first select corresponds to a positive number, and the rest of select corresponds to a negative number, which will be accumulated depending on the ones that are added.
The problem comes when I select the selects, since the first input should be added/subtracted with the second input, giving rise to the third input that would be the result of these two, but it doesn't work, only when I put the numbers in the inputs manually, and not through select.
What could I do?
$('.pp').on('change', function() {
var value =this.value;
if(value == 'Gran Casa con Supremacía')
{
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if(value == 'Gran Casa')
{
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if(value == 'Casa Vasalla')
{
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
});
$(document).ready(function() {
$(".a2, .b2").on("keydown keyup", function(event) {
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
$('.select').on("change", function(){
var total=0;
$('.select').each(function(){
var price = parseFloat($(this).find("option:selected").data("price"));
console.log( price );
total += price;
});
$("#opt_price").val(total.toFixed(0))
});
$('.amt').keyup(function() {
var importe_total = 0
$(".amt").each(
function(index, value) {
if ( $.isNumeric( $(this).val() ) ){
importe_total = importe_total + eval($(this).val());
//console.log(importe_total);
}
}
);
$("#inputTotal").val(importe_total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table><select name="titulos" class="pp"><option hidden value="" disabled selected>Títulos</option><option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option></select><select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option><option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<div class="puntosrasgos"><div class="col-six" style="
height: 40px;
line-height: 40px;
"><div class="titulopuntosrasgos">Puntos de Población [PP]</div></div><div class="col-four"><div class="input-group" style="
position: absolute;
margin-top: -23px;
margin-left: 145px;
">
<table style="">
<tbody><tr>
<td width="10" rowspan="1" style="
table-layout: fixed;
min-width: 35px;
"><div class="col-pp"><input class="solo-numero amt puntosdepoblacion" type="number" id="form-field-first" value="0" name="positivos"></div></td>
<td width="10" rowspan="1"><div class="col-pp"><input class="solo-numero amt" value="0" type="number" id="opt_price" name="negativos"></div>
</td>
<td colspan="3" height="10"><div class="solo-numero amt"><input id="inputTotal" class="solo-numero" value="0" type="number" disabled name="total"></div>
</td>
</tr>
</tbody></table></div></div></div>

You have to manually trigger an event when you change the input values.
First, make them respond to the change event:
$(".a2, .b2").on("keydown keyup change", function(event) {
// Code ommited
})
Then, whenever you update the value, trigger the event:
In the .pp handler, after the if blocks:
$('.puntosdepoblacion').change();
And
$("#opt_price").val(total.toFixed(0)).change();
Full code:
$(document).ready(function() {
$('.pp').on('change', function() {
var value = this.value;
if (value == 'Gran Casa con Supremacía') {
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if (value == 'Gran Casa') {
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if (value == 'Casa Vasalla') {
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
// Trigger the change event in .pp to force calculation <---
$('.puntosdepoblacion').change();
});
$('.select').on("change", function() {
var total = 0;
$('.select').each(function() {
var price = parseFloat($(this).find("option:selected").data("price"));
console.log(price);
total += price;
});
$("#opt_price").val(total.toFixed(0))
.change(); // Trigger
});
$(".a2, .b2").on("keydown keyup change", function(event) { // <--- Respond to change event, too
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="titulos" class="pp">
<option hidden value="" disabled selected>Títulos</option>
<option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option>
</select>
<select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<div class="puntosrasgos">
<div class="col-six" style="height: 40px; line-height: 40px;">
<div class="titulopuntosrasgos">Puntos de Población [PP]</div>
</div>
<div class="col-four">
<div class="input-group" style="position: absolute; margin-top: -23px; margin-left: 145px;">
<table style="">
<tbody>
<tr>
<td width="10" rowspan="1" style="table-layout: fixed; min-width: 35px;">
<div class="col-pp">
<input class="col-xs-4 a2 puntosdepoblacion" type="number" disabled id="form-field-first" value="0" name="positivos">
</div>
</td>
<td width="10" rowspan="1">
<div class="col-pp">
<input class="col-xs-4 b2" value="0" type="number" disabled id="opt_price" placeholder="0" name="negativos">
</div>
</td>
<td colspan="3" height="10">
<div class="col-pp">
<input class="col-xs-4 c2" value="0" type="number" disabled id="form-field-first" placeholder="0" name="total">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>

I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

Drop-Down List using Javascript HTML and jQuery

I'm trying to create a function in javascript that will see what day it is and depending on a day have a certain drop box list appear. However, for some reason it won't work and I'm not sure where the syntax error is in my code.
HTML:
<html>
<head></head>
<body>
<div class="Questions">
<div id="myAnswers" style="display : none">>
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B" style="display : none">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>
</body>
</html>
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var day= new Date();
var weekday= day.getDay();
$("#A","#B").hide();
function showAnswer(){
if(weekday==3 || weekday==4){
$("#B").show();
}else{
$("#A").show();
}
}
window.onload=showAnswer;
</script>

A few issues to fix before your code can work:
As noted by #junkfoodjunkie you do not need the style="display:none;"
Use new Date(), not new Day()
Use $("#A,#B").hide(), not $("#A","#B")
Feel free to liberally use jQuery since ... :)
$(function() {
var day= new Date();
var weekday= day.getDay();
$("#A,#B").hide();
function showAnswer(weekday) {
if(weekday==3 || weekday==4) {
$("#B").show();
} else {
$("#A").show();
}
}
showAnswer( weekday );
console.log( weekday );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Questions">
<div id="myAnswers">
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>

how to add multiselect checkbox by clicking on button

I want to add multiselect checkbox by clicking on button.i am using bootstrap multiselect.If anything other than bootstrap multiselect is also ok.
functionalities are not working for mutiselct checkbox after clicking on button.
$('#addSupplierbtn').click(function(){
$('#webhost').html($('#multipleSupplier').html());
});
<div id="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<!-- begin snippet: js hide: false -->

var counter = 0;
$('#addSupplierbtn').click(function(){
var anotherselect = $('.multiselect:nth-child(1)').clone();
anotherselect.attr('id', "multiselect"+counter)
$('.multiselect').last().after(anotherselect);
counter ++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="multiselect" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<input type='button' id='addSupplierbtn' value='Another Select'>
Try this way..

$('#addSupplierbtn').click(function(){
$('#webhost').html($('#multipleSupplier').html());
});
<div id="multipleSupplier" >
<select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
</div>
<!-- begin snippet: js hide: false -->

How to add div with a button click in angularJs

I am new to angularJs. What i was trying to to let say I have a div where I have some selectbox and textbox in a row format. there is a button say "ADD". When I click on ADD i need to add the same div elements another time below the previous div.
This is my div part....
<div class="form-group row">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<button id="addDiv" class="btn btn-default">Add</button>
</div>
</div>
Help me to crack this...

You can use an Angular directive and jquery selectors. Basically replace the button with a directive that emits a button attached to a click event. On the click event clone the div html, compile it using $compile service in angular and append it to the body. see example
var app = angular.module('addDivApp', []);
app.controller('addDivController', function($scope) {
});
app.directive('addDivDirective', function() {
return {
restrict: 'A',
scope: true,
template: '<button id="addDiv" class="btn btn-default" ng-click="click()">Add</button>',
controller: function($scope, $element, $compile) {
$scope.clicked = 0;
$scope.click = function() {
$('body').append($compile($('.form-group').clone())($scope));
}
}
}
});
<!DOCTYPE html>
<html ng-app="addDivApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body ng-controller="addDivController">
<div class="form-group row">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<div add-div-directive></div>
</div>
</div>
</body>
</html>

Add below code in your controller and do a little change in html. Add ng-repeat in div tag to repeat and ng-click method in button to call functions.
$scope.divCount=[{}];
$scope.addDiv=function(){
$scope.divCount.push({});
};
$scope.removeDiv=function(){
$scope.divCount.splice($scope.divCount.length-1,1);
}
<div class="form-group row" ng-repeat="count in divCount">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<button id="addDiv" class="btn btn-default"
ng-click="addDiv()">Add</button>
</div>
<div class="col-md-1">
<button id="removeDiv" class="btn btn-default"
ng-click="removeDiv()">Remove</button>
</div>
</div>