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 - How to make element not execute onclick function from parent?

In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?
<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
<div>
<button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Thank you in advance!

You can do that by calling event.stopPropagation(); in the button.
<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
Read more about it from Here
But I would suggest a cleaner solution,
Separate the card body from the card footer where the button exist.
<div class="card card-body item">
<div onclick="$('#extra-info').slideToggle();">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
</div>
</div>
<div>
<button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>

How do i get the class name of 2 out of three buttons?

I have added toggler on them. now all i want is when one is clicked other two hide their corresponding div's? Here is the code:
$(document).ready(function(){
$('.btn').click(function(){
var scl = this.className.split(/\s+/)[1];
console.log(scl);
$('#' + scl).toggle('slow');
// document.getElementById('applied').style.display = 'none';
// document.getElementById('shortlisted').style.display = 'none';
});
});
and here are the buttons i'm using to toggle.
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
these are the divisions i'm toggling
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>

You can hide all the container initially. Then on click first hide them and toggle the respective container matching the id attribute:
$(document).ready(function(){
$('.btn').click(function(){
// you can set some style on the seleced button
$('.btn').css({'background-color': '', color: ''});
$(this).css({'background-color': 'green', color: '#fff'});
//
var scl = this.className.split(/\s+/)[1];
$('.container').hide('slow');
$('#' + scl).toggle('slow');
});
});
.container{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings">Openings</div>
<div class="container" id="applied">Applied</div>
<div class="container" id="shortlisted">Shortlisted</div>

Filterout the current button on click and find their parent "div"s and hide them.
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').not(this).each( function(btn) {
$(this).parents("div").hide("slow");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>

Using Bootstrap collapse class not working for multiple div tags

I have a list of item A, B, C, D, E. Each item you click on one of these list items there is a bootstrap class 'collapse' which shows a div with text in it. This all works ok. However, you have to click the list item again to collapse the div with the text in it.
I am trying to make sure when a list item is clicked on, all other openend divs are closed immediately.
I found something which mentions to use 'data-parent' but as seen in the snippet below this does not work. To see the problem view the snippet and expand snippet.
To replicate my problem these are the steps:
Click item A (you will see text appear 'A' underneath)
Click item B (you will see text 'A' still appear as well as 'B')
Click item C (you will see text 'A','B''C')
Click item A (you will now see 'B','C') but A has now collapsed
I am trying to make sure you only see the text related to the ID of the div you clicked on.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p> </p>
<h2>LIST ITEM</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseA" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseFood">
<span>A</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseB" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseVegan">
<span>B</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseC" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseJain">
<span>C</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseD" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseLunch">
<span>D</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div class="mu-single-counter" data-toggle="collapse" href="#collapseE" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseCocktail">
<span>E</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA" aria-expanded="true" >
<div class="intro">
A
</div>
<hr>
</div>
<div class="collapse" id="collapseB" aria-expanded="true" >
<div class="intro">
B
</div>
<hr>
</div>
<div class="collapse" id="collapseC" aria-expanded="true" >
<div class="intro">
C
</div>
<hr>
</div>
<div class="collapse" id="collapseD" aria-expanded="true" >
<div class="intro">
D
</div>
<hr>
</div>
<div class="collapse" id="collapseE" aria-expanded="true" >
<div class="intro">
E
</div>
<hr>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Restaurant Menu -->
</body>
</html>

You can do this with jquery like,
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>
On data-toggle="collapse" click, means on your list items click, all the div's which are opened (have the .in class with them) are close with the collapse function.
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</link>
</meta>
</head>
<body>
<!-- Start Restaurant Menu -->
<section id="mu-restaurant-menu">
<div class="container">
<div id="menuGroup">
<div class="panel">
<div class="row">
<div class="col-md-12">
<div class="mu-restaurant-menu-area">
<div class="mu-title">
<p>
</p>
<h2>
LIST ITEM
</h2>
</div>
<div class="row">
<div class="col-md-12">
<div class="mu-counter-area">
<ul class="mu-counter-nav">
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseFood" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseA">
<span>
A
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseVegan" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseB">
<span>
B
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseJain" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseC">
<span>
C
</span>
</div>
</li>
<li class="col-md-2 col-sm-6 col-xs-12">
<div aria-controls="collapseLunch" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseD">
<span>
D
</span>
</div>
</li>
<li class="col-md-2 col-sm-3 col-xs-12">
<div aria-controls="collapseCocktail" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseE">
<span>
E
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="mu-restaurant-menu-content">
<div class="row visible-lg visible-md visible-sm visible-xs collapsable-content">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="main-menu-box">
<hr>
<div class="collapse" id="collapseA">
<div class="intro">
A
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseB">
<div class="intro">
B
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseC">
<div class="intro">
C
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseD">
<div class="intro">
D
</div>
<hr>
</hr>
</div>
<div aria-expanded="true" class="collapse" id="collapseE">
<div class="intro">
E
</div>
<hr>
</hr>
</div>
</hr>
</div>
</div>
</div>
<hr>
</hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!-- End Restaurant Menu -->
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="collapse"]').click(function(event) {
if ($('.collapse.in').length > 0) {
$('.collapse.in').collapse('hide')
}
});
})
</script>

Website on mobile is defaulting to search box

When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>