Develop Reference

How can I align an item with an item above it in html/css/js?

I have 3 input blanks on my form (see the screenshot below). I have 1 dropdown button and one <input type="text"> in 1 row and another <input type="text"> in the 2nd row. I want the 2 <input type="text"> to align. In other words, I want the "Choice 2" box to be right below the "Choice 1" box. How can I do this? Thanks.
By the way, This is my html:
<div class="container">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
<div class="container">
<input type="text" name="" value="" placeholder="Choice 2">
</div></div>
And this is my css:
.container {padding: 1% 20%;
margin: auto;
text-align: center;}
body {
background-color: #b6e6bd;
line-height: 1.6;
}
How can I make the choice 1 and choice 2 boxes which are both <input type="text"> be directly above and below each other? Thanks

Maybe you are allowed to slightly change HTML?
Here is my try. I've moved two input[text] to one div and the dropdown to another. Also I changed .container class to be flex#center (but you can use any other layout - table or div with known widths).
.container {
padding: 1% 20%;
margin: auto;
text-align: center;
display: flex;
justify-content: center;
}
body {
background-color: #b6e6bd;
line-height: 1.6;
}
.container-inner {
margin-left: 10px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="container-inner">
<input type="text" name="" value="" placeholder="Choice 1"> <br>
<input type="text" name="" value="" placeholder="Choice 2">
</div>
</div>

The best way is to use a framework like Bootstrap. But if you won't I suggest you to change your code to this:
.container {
padding: 1% 20%;
margin: auto;
text-align: center;}
body {
background-color: #b6e6bd;
line-height: 1.6;
}
<div class="container">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<select id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
<div class="container">
<input type="text" name="" value="" placeholder="Choice 2" style="margin-right: -64px;">
</div>
</div>
I hope this will helpful.

Change class after changing list

I have a dual list in which data is printing a ul li pattern from a JSON file. You can move any li to any side list. I am stuck at a point.
I want to enable a property that the <p> tag content only in <li> in right-list gets display: block and not the left-list side <li>. I have tried different JS code but they didn't work for me .
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p style="display: none" class="show">
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>

Add CSS and remove inline style display none from p tag in JS.
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p>
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
/********************************/
/********************************/
/********************************/
/* ADD THIS */
.dual-list.list-left .well li.list-group-item p {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-6">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="dual-list list-right col-6">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group" id="La">
<li class="list-group-item" id="rl">point_in_first_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_first_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">point_in_second_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_second_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">trapezium_draw_slope_area_equ
<p>
Simple collapsible
</p>
<div id="demo_trapezium_draw_slope_area_equ" class="collapse">
20, strong, true, true
</div>
<p></p>
</li>
</ul>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>

How do I submit a new item onto page? (jQuery)

Doing a project for school. I have to be able to add a grocery item onto a list with the controls "check" and "delete" inside the box with the new item. There is already 4 items on the list for reference. Ive gotten as far as being able to add the box, with the food item inside, but i cant seem to get the buttons inside, along with the same font and style as the others on the list.
jQuery
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li>' + textInput + '</li>')
});
};
$(addItem);
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list > li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

Your addItem() method needs to include all of the HMTL to generate a new formatted item, not just the <li> element.
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li><span class="shopping-item">' + textInput + '</li></span> <div class="shopping-item-controls"> <button class="shopping-item-toggle"> <span class="button-label">check</span> </button> <button class="shopping-item-delete"> <span class="button-label">delete</span> </button> </div>')
});

You are missing code in jquery. replace the code and check
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li><span class="shopping-item ">' + textInput +'</span><div class="shopping-item-controls"><button class="shopping-item-toggle"><span class="button-label">check</span></button><button class="shopping-item-delete"><span class="button-label">delete</span></button></div></li>')
});
}
$(addItem);``

Here is the working example of you code. You have to add your li code to your jquery code.
html = '<li>';
html += ' <span class="shopping-item">' + textInput + '</span>';
html += ' <div class="shopping-item-controls">';
html += ' <button class="shopping-item-toggle">';
html += ' <span class="button-label">check</span>';
html += ' </button>';
html += ' <button class="shopping-item-delete">';
html += ' <span class="button-label">delete</span>';
html += ' </button>';
html += ' </div>';
html += '</li>';
$('ul').append(html)
Below is complete example of your code
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
html = '<li>';
html += ' <span class="shopping-item">' + textInput + '</span>';
html += ' <div class="shopping-item-controls">';
html += ' <button class="shopping-item-toggle">';
html += ' <span class="button-label">check</span>';
html += ' </button>';
html += ' <button class="shopping-item-delete">';
html += ' <span class="button-label">delete</span>';
html += ' </button>';
html += ' </div>';
html += '</li>';
$('ul').append(html)
});
};
$(addItem);
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list > li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

Tooltip position apperance issue

I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

Deleting and restoring items

I am trying to delete and restore items in this fashion:
when deleted (by pressing the red 'x') a picture of the item will appear in the navbar,
when the image is clicked in the navbar, the item will be restored onto the page.
As you can see, the last two functions that are currently commented out are what I have been trying to use to implement this functionality, however when I remove the comment '/*' my other javascript functions stop working. Any help would be greatly appreciated.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="jquery-cookie-master"/>
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand deleted-item hidden" id="box1">
<img class="navpics" src="surface3.jpg" alt="Microsoft Surface">
</a>
<a class="navbar-brand deleted-item hidden" id="box2">
<img class="navpics" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
</a>
<a class="navbar-brand deleted-item hidden" id="box3">
<img class="navpics" src="mabook.jpg" alt="Apple Macbook Pro Retina">
</a>
<a class="navbar-brand deleted-item hidden" id="box4">
<img class="navpics" src="superdrive.jpg" alt="Apple SurperDrive">
</a>
<a class="navbar-brand deleted-item hidden" id="box5">
<img class="navpics" src="case1.jpg" alt="Laptop Case">
</a>
</div>
</div>
</div>
<h2>Premium Computer Supplies!</h2>
</header>
<ul id="sortable" style="list-style-type:none">
<!----------------------------------------------------------------->
<!--<div id="all">-->
<li class="ui-state-default"><div class="row" id="box1">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div class="description" id="pnd1" hidden>
<!--Description and price-->
<div >
<p>With a variety of processors and memory options, there's a Surface for everyone!</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box2">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div class="description" id="pnd2" hidden>
<!--Description and price-->
<div>
<p>The Type Cover is a perfect accessory for your Surface!</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box3">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div class="description" id="pnd3" hidden>
<!--Description and price-->
<div>
<p>The Macbook is a must-have for students, parents, and more!</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box4">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div class="description" id="pnd4" hidden>
<!--Description and price-->
<div>
<p>Able to read disks, the SuperDrive is essential for burning music and home-movies!</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box5">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div class="description" id="pnd5" hidden>
<!--Description and price-->
<div>
<p>Carry your computer with you anywhere with a computer bag!</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6',
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1',
}, 1);
});
$("div#box1").click(function(){
$("#pnd1").animate({
hidden: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
hidden: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
hidden: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
hidden: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
hidden: 'toggle'
});
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$('button.close').click(function() {
$(this).parent().animate({
'opacity': 0
}, 1, function() {
$(this).css({'display': 'none'})
})
$(".deletedItem#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
</script>
</body>
CSS:
.bodypics {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
#sortable li {
height: 402px;
float: left;
}
.close{
color:red;
}
.navpics{
width: 70px;
height: 30px;
}

I have figured it out! Mainly a combination of me being careless and inexperienced, but here's the solution:
Just change this last bit of code:
$('button.close').click(function() {
var name = $(this).parent().attr("id");
$(this).parent().toggleClass("hidden");
$(".deleted-item#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
And now all is dandy!