Develop Reference

Magnific Popup showing same item

Refering to this question , it has a helpful answer but it's partial answer because it only shows three unique popup dialogs - static.
I'm new to jQuery and working in this project. I want this to be dynamic with MySql database. Let's say I have a collection of 20 products stored in a tbl_products and each product has a uniqe id, name and price. When user clicks for more product details, I want to display the Magnific popup dialog that shows the product details, showing the product image(small thumbnail), product name and product price.
This link is inside loop:
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
Here is the Code:
<div class="page-content">
<?php
$query = "SELECT * FROM tbl_product ORDER BY product_id ASC LIMIT 20";
$result = mysqli_query($connect, $query);
$ctr = 0;
if(mysqli_num_rows($result) > 0)
{
$i = 0;
$param = 'right';
while($row = mysqli_fetch_array($result))
{
//echo "<h2>" . $row[0] . "</h2>";
$data = $row["product_image"];
$images = explode(";", $data);
if($param=='left'){
$param = "right";
}
else{
$param = "left";
?><div class="clear"></div><?php
}
?>
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<span class="fa fa-check fa-3x" style="color: black; margin-left:45%;"></span>
<h3 style="text-align:center; margin-top:0px;margin-bottom:20px;">Artikulli u shtua në shportë</h3>
<div class="table-responsive" style="border: none !important;">
<table style="border: none !important;">
<tr>
<th width="80%"></th>
<th width="20%"></th>
</tr>
<tr>
<td style="font-size:12px;">
<div class="news-thumbs" style="margin-left:0px; margin-right:20px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p style "font-size:11px;">
<?php
foreach(range(1, $row[10]) as $i)
{
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</p>
</div>
</a>
</div>
</td>
<td style="margin-left:-50px; font-size:28px; font-style:bold; line-height:20px;">€<?php echo $row[2];?> <br>
<p style="font-size:11px; font-style:bold;">TVSH - 8% </p>
<p style="font-size:10px; line-height:20px;">Dërgesa Falas</p>
Shiko detalet
</td>
<td style="font-size:12px;"> </td>
</tr>
</table>
</div>
<hr style="border-top: 0.5px solid #E8E8FF;">
<button type="button" class="btn btn-default popup-modal-dismiss">Vazhdo me blerje</button>
<button type="button" style="float:right;" class="btn btn-primary">Kryje porosinë</button>
<!-- </div>
<div class="news-thumbs" style="margin-left:-50px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p><?php echo $row[2];?></p>
</div>
</a>
<hr style="border-top: 0.5px solid #E8E8FF;">
</div> -->
</div>
<a href="m-detail-<?php echo $row[0]; ?>.html">
<div class="half-material-box-<?php echo $param; ?>">
<span class="fa fa-heart-o fa-2x"style="color: red; aria-hidden="false";></span>
<!--<i class="center-text full-bottom huge-icon color-yellow-dark fa fa-bolt"></i>-->
<amp-img src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" layout="responsive" width="127" height="130"></amp-img>
<p class="center-text small-text half-bottom">
<!--<i class="fa fa-angle-right"></i><?php echo substr_replace($row[1], "...", 60);?>-->
</p>
<h3 class="small-text lef-text bold" name="hidden_name" style="color:#969696;"><?php echo $row[1]; ?></h3>
<h4 class="left-text thick" name="hidden_price" style="color:#f94b2b;">€ <?php echo $row[2]; ?></h4>
<?php
foreach(range(1, $row[10]) as $i)
{
//echo $i;
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</div>
</a>
<!-- </form> -->
<?php
}
}
?>
<div class="clear"></div>
</div>
jQuery:
(function ($) {
$(document).ready(function() {
$(".popup-with-zoom-anim").each(function() {
$(this).magnificPopup({
type: 'inline',
fixedBgPos: true,
fixedContentPos: true,
overflowY: 'hidden',
closeBtnInside: false,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
})(jQuery);
It shows the Popup dialog the way I want but the problem is that it shows the same data no matter what product I click!
I can't figure it out weather it has problem with Id or .each instance in jQuery. Any help would be appreciated!
Thank you!

Print the same header on all pages

I have the following dynaform created in js that has the following header:
document.getElementById("btnPrint1").onclick = function () {
printElement(document.getElementById("printThis1"));
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
console.log($printSection);
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
var linha = ``;
linha += `<div class = "headd">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="img">
<img class="logo1 imag" src="./images/logo/logo.jpg" alt="">
</div>
<div><span class="logo2 título">xxxxx</span><span class="logo3 título">xxxxx</span></div>
<div class="logo4 dentro">xxxxxxx e xxxxxxxxx, lda.</div>
<div class="dentro" style="margin-top: 3%;">xxxx xxx xxxxxx, nº xxxx - xxxx-xxxx xxxx xxxx</div>
<div class="dentro">Tel. xxxx xxx xxxx</div>
<div class="dentro">xxxxxxxxxx#sapo.pt <span class="logo5 dentro">www.facebook.com/xxxxxxxxx</span></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 fix-div14" style="float: right;">
<div class="form-group col-md-4" style="float: right;">
<input type="text" class="form-control1 dentro" style="text-align: center;" value="1">
<span class="form-highlight"></span>
<span class="form-bar"></span>
<label class="label3 logo6 dentro" for="Orcamento">Orçamento Nº</label>
</div>
<div class="form-group col-md-4" style="float: right;">
<input type="text" class="form-control1 dentro" style="text-align: center;" value="2021-07-27">
<span class="form-highlight"></span>
<span class="form-bar"></span>
<label class="label3 logo7 dentro" for="Data">Aprovado</label>
</div>
</div>
<div style="float: right;" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 fix-div15">
<div class="dentro">Nº Cliente: xx</div>
<div class="dentro">xxxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxx - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxxxx | xxxxxxxxxx</div>
</div>
<div style="margin-top: 3%; border-style: solid; border-bottom: 10px; border-right: 10px; border-left: 10px;"><div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 logo11" style="margin-top: 2%;">
<div class="form-group col-md-12 título" style="text-align: center;"><span>Serviço: Fonecimento de móveis</span></div>
</div>
</div>`;
$("#retorc6").html(linha);
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
margin: 2mm;
}
.headd {
padding : 20px 0 20px 0;
margin-bottom:20px;
border-bottom : 2px solid #0095c8;
}
p {
margin : 0;
}
.content11 {
width: 100%;
padding : 10px;
height : 70px;
border-bottom : 1px solid;
text-align : center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<button type="button" class="btn btn-info show-side-btn" id="btnPrint1" data-show="show-side-navigation1" style="float:right;"><i class="fa fa-print" aria-hidden="true"></i></button>
<div style="clear:both;"></div>
<div id="printThis1" class="printThis1">
<form role="form" action="#!" id="retorc6">
</form>
</div>
I want this header to be kept if I print more than one page.
I'm using class="headd" to try to make the header repeat on every page. The css of this class I'm putting inside #media print to be called when I send it to print, but even so the header only appears on the first page I print and doesn't appear on the others.
Can anyone help repeat the header on every page that is printed?

I did it recently, you need to embed all your code into a table.
There you can define a <thead>, which will be repetead in every page: inside that you define an empty space, in order to place a fixed header, like the one used in this answer.

my jquery script is not working

I have a form that filters data by year and month which worked fine before I left to work but the next day it was not working anymore. I'm using jQuery and PHP and MySQLi. Can someone help me with this? I can't seem to find the problem in my code:
reports.php
<?php
session_start();
if (!isset($_SESSION['username'])) {
header('Location: filter.php');
}
else{
$uname=$_SESSION['username'];
}
?>
<html>
<head>
<title>LADD DMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="icon" type="image/png/gif" href="pcflogo.png">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-image:url('bg.png');
}
.box {
width:100%;
padding:20px;
background-color:#fff;
border-radius:5px;
margin-top:25px;
}
.navbar-default {
background-color:teal;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
border-bottom:2px solid whitesmoke;
color:white;
}
li:hover {
border-bottom:2px solid whitesmoke;
}
.button{
display:inline
}
.modal-header {
color:white;
border-bottom:1px solid #eee;
background-color: teal;
-webkit-border-top-left-radius: -5px;
-webkit-border-top-right-radius: -5px;
-moz-border-radius-topleft: -5px;
-moz-border-radius-topright: -5px;
border-top-left-radius: -5px;
border-top-right-radius: -5px;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: #f2f2f2;
}
.bootgrid-table th > .column-header-anchor {
color:white;
font-weight:bold;
}
.bootgrid-table th > .column-header-anchor:hover {
color:black;
font-weight:bold;
}
.footer {
position: fixed;
height:40px;
left: 0;
bottom: 0;
width: 100%;
background-color: teal;
color: white;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LADD DMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="../blgd1/index2.php" >Home </a></li>
<li>Documents</li>
<li>Files</li>
<li>Reports</li>
<li>View Documents monthly</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Welcome, <?=$_SESSION['username'];?> <span class="glyphicon glyphicon-off" aria-hidden="true" ></span> </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container box" style="background-image:url('bg.png'); ">
<br />
<div align="right">
</div>
<h1>Monthly Year</h1>
<div id="ab">Monthly Filter:</div><select id="year" name="fetchby" class="form-control">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<h1>Monthly Report</h1>
<div id="ab">Monthly Filter:</div>
<select id="month" name="fetchby" class="form-control" >
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
</select>
<br>
<br>
<div class="table-responsive">
<table class="table table-striped" style="font-size:15px;">
<?php
$conn = mysqli_connect('localhost','root','','dms');
$query="select * from document";
$output=mysqli_query($conn,$query);
?>
<div class="table-responsive" >
<table id="data-table" class="table table-striped">
<thead style="background-color:teal;">
<tr>
<th >subject</th>
<th>type</th>
<th>date</th>
<th>Transaction</th>
<th>Signatories</th>
</tr>
</thead>
<tbody>
<?php
while($fetch = mysqli_fetch_assoc($output)) {
echo '<tr>';
echo '<td>'.$fetch['document_name'].'</td>';
echo '<td>'.$fetch['document_type'].'</td>';
echo '<td>'.$fetch['document_status'].'</td>';
echo '<td>'.$fetch['document_date'].'</td>';
echo '<td>'.$fetch['document_signatories'].'</td>';
echo '</tr>';
};
echo '</table>';
?>
</div>
</div>
<div class="footer">
<h4>Copyright LADD KIDS 2018<h4>
</div>
<script>
$(document).ready(function() {
$("#month").on('change',function()
var month = $("#month").val();
var year = $("#year").val();
var keyword = year+"-"+month;
$.ajax({
url:'fetchreport.php',
type:'POST',
data:'keyword='+keyword,
beforeSend:function() {
$("#table-container").html('Working...');
},
success:function(data) {
$("#table-container").html(data);
},
});
});
});
</script>
</body>
</html>
fetchreport.php
<?php
$conn = mysqli_connect('localhost','root','','dms');
$keyword=$_POST['keyword'];
$query="SELECT * FROM document WHERE document_date LIKE '%".$keyword."%'";
$output=mysqli_query($conn,$query);
echo '<table border="1"';
echo '<tr>
<th>Subject:</th>
<th>Type:</th>
<th>Transaction</th>
<th>Date Recieved/Released:</th>
<th>Signatories:</th>
</tr>';
while($fetch = mysqli_fetch_assoc($output)) {
echo '<tr>';
echo '<td>'.$fetch['document_name'].'</td>';
echo '<td>'.$fetch['document_type'].'</td>';
echo '<td>'.$fetch['document_status'].'</td>';
echo '<td>'.$fetch['document_date'].'</td>';
echo '<td>'.$fetch['document_signatories'].'</td>';
echo '</tr>';
};
echo '</table>';
?>

From what i see you do not have a div or table with table-container as id
You should add <div id="table-container"></div> somewhere in your html. Seems the result from php never gets displayed
Second typo
As pointed out by Rasclatt, you have a typo in the table definition by the php side.
Change
echo '<table border="1"';
To
echo '<table border="1">'; #close
Side-note: please use prepared statements to prevent SQL injection attacks

Issue with firing one script canceling another script when used before the other

So I have a page where one script allows user to copy contents to clipboard and then another angular script that toggles a showing of a text editor. The issue here is if the selects the 'add notes' button (called the ng-click="showEditor"), then the copy to clipboard function ceases to work. Not sure why one is canceling the other. The code:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74074881-2', 'auto');
ga('send', 'pageview');
</script>
<style type="text/css">
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
<div class="container-fluid" style="font-family: Segoe UI; padding: 0;">
<div style="background-color: #0070c0; min-height:100px;">
<h1 style="color: #ffffff; font-size: 24px; padding-left:20px; padding-top: 30px;">Problem Phase Worksheet</h1>
<span style="float: right; font-size: 14px;">Return to Moneyball Site</span>
</div>
<form class="form-horizontal" autocomplete="off" role="form" style="padding-left: 20px; padding-top: 20px;">
<div class="col-md-4">
<div class="form-group">
<span style="color: #0070c0; font-size: 20px;">Inputs</span>
</div>
<div class="form-group">
<label class="control-label" for="criteria" style="font-size: 18px; padding-bottom: 10px;">Criteria:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The threshold at which your hypothesis is considered to be true or false.
Examples: “More than 80%”, “Three quarter (75%)”, “Majority (51%-100%)”
"></i></span>
<input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 18px;" placeholder="(e.g. more than 80%)">
</div>
<div class="form-group">
<label class="control-label" for="customer" style="font-size: 18px; padding-bottom: 10px;">Customer:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" A type of people or organizations to whom eventually you want to offer your product. Note, that sometime in big organizations there is a difference between buyers who purchase a product and end-users who actually use the product.
Examples: “Enterprise system admins”, “Enterprise IT managers”, “Startup developers”, “Academia Data Scientists”
"></i></span>
<input type="text" class="form-control" id="customer" ng-model="customer" style="font-size: 18px;" placeholder="(e.g. enterprise system admins)">
</div>
<div class="form-group">
<label class="control-label" for="task" style="font-size: 18px; padding-bottom: 10px;">Job to be done:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The main task for which customers “hire” products and services to get a “job” done. A framework that has been popularized by Clayton Christensen and Anthony Ulwick.
Examples:
“Keeping their servers up to date”, “Planning infrastructure capacity”, “Deploying a mobile app”, “Preparing database for analysis”
"></i></span>
<input type="text" class="form-control" id="task" ng-model="task" style="font-size: 18px;" placeholder="(e.g. keeping servers up to date)">
</div>
<div class="form-group">
<label class="control-label" for="problem" style="font-size: 18px; padding-bottom: 10px;">Problem:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The major challenge that customers are facing when performing their Job-To-Be-Done. Note that the problem description needs to be specific and measurable. This can help to estimate a size of the problem and it also can be used as a benchmark for a value proposition provided by your new product.
Examples:
“It takes too long (more than 24 hours)”, “It costs too much (more than $10,000)”, “It require too many tools (five)”
"></i></span>
<input type="text" class="form-control" id="problem" ng-model="problem" style="font-size: 18px;" placeholder="(e.g. it takes to long (24+ hours) )">
</div>
</div>
<div class="col-md-6">
<div>
<span style="color: #0070c0; font-size: 20px;">Examples</span>
<a id="btnPrint" class="btn btn-primary" style="float: right; font-size: 18px;">
<span><i class="fa fa-print" aria-hidden="true"></i></span> Print
</a>
<a class="btn btn-primary" style="float: right; font-size: 18px; margin-right: 10px;" uib-tooltip="copy to clipboard" ngclipboard data-clipboard-target="#printThis" ng-click="steps.copyToast()">
<span><i class="fa fa-files-o" aria-hidden="true"></i></span> Copy
</a>
</div>
<div id="printThis" style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc; border-radius: 8px;" ng-model="problemExp"> <div>
<p style="font-size: 18px; color: #afabab; font-weight: 600;">HYPOTHESIS</p>
<p style="font-size: 18px;" id="hypCriteria">We believe that <span style="color: blue;">{{ criteria || '[criteria]' }}</span> of <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> because <span style="color: blue;">{{ problem || '[problem]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">CUSTOMER: SCREENING CRITERIA:</p>
<p style="font-size: 18px;">We are looking for <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">EXPERIMENT: INTERVIEW QUESTIONS:</p>
<p style="font-size: 18px;">Thank you for your time and interest in sharing your experiences. You are the expert. We are here to learn from you. I’m going to talk as little as possible.</p>
<a class="btn btn-primary" style="font-size: 18px; margin-bottom: 10px;" ng-click="showEditor()">
<span><i class="fa fa-pencil-square-o" aria-hidden="true"></i></span> Add Notes
</a>
<p style="font-size: 18px;">1. Tell me who is involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> at your company?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">2. How often are you personally involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">3. Tell me about the last time when you did <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">4. What were the major challenges when you were this task?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">5. Which of these challenges did you find most frustrating?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">6. On a scale of 0-10 (where 10 is extremely frustrating), how frustrating was this experience? Why?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">7. Have you done anything to work around these challenges? What?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">8. If so, how well did that solve your problem? Why/why not?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">9. If you could wave a magic wand and be able to do anything about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> in your daily job, what would it be?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">10. What would this allow you to achieve?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">11. Who do you know that I should also be talking with? Who else cares a lot about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">12. I’ve learned so much from you! Can I ask for your feedback in the future?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
</div>
</div>
</div>
</form>
</div>
The show editor script is simple:
$scope.isHidden = true;
$scope.showEditor = function () {
$scope.isHidden = $scope.isHidden ? false : true;
}
The copy to clipboard is third party called ng-clipboard. The show editor script is in the controller for this view.
Any ideas or suggestions please?
Thanks much.

how to create some divs which has the same stylesheet?

This is my code. I want to get a dynamic div content list in my 'content1' div.
For example. When this page started loading, I would do an ajax request to get some info. According the info, create some divs (the number of divs is from info array's count) which has the same stylesheet as 'accountContent' div but has different content.
<div class="main">
<br>
<div id="content1" style=" border-radius: 8px; width: 100%;margin: auto; background-color: white;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px; ">
<br>
<div class="accountContent">
<div style="width: 95%;margin: auto; background-color: rgb(245,245,245);height: 40px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">公众号名称</p>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">接入状态：</p>
</div>
<div class="col-md-4" style="padding-top: 5px; ">
<button type="button" class="button button-small button-plain button-borderless" data-toggle="tooltip" data-placement="left" title="删除" style="float:right;"><i class="fa fa-times" style=" color: #101010"></i></button>
</div>
</div>
<div style="width: 95%;margin: auto; background-color: white;height: 50px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<img src="images/default.jpg" style="width: 40px;height: 40px;border-radius: 20px;float: left">
<div style="margin-left: 10px; padding-top: 10px;float: left"><p>物管助手</p></div>
</div>
<div class="col-md-4" style="padding-top: 20px;">
<p style=" margin-left: 12px;float: left">接入成功</p><i class="fa fa-check" style="padding-top: 2px; padding-left: 2px;"></i>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<i class="fa fa-pencil" style="padding-top: 11px;"></i> 编辑
<i class="fa fa-wrench" style="padding-top: 11px;"></i> 功能管理
</div>
</div>
<br>
</div>
<br>
<br>
</div>
It shows as in this screenshot:

Any markup you add to your page will be styled with the CSS rules already applied to the page. In your case it sounds like you simply need to apply .accountContent to those new DIVs.
You do not have to create a stylesheet for them. If they have different styles than those already on the page, simply add the CSS selector that you've applied to those new DIVs in your current CSS file. When the Ajax adds the new DIVs to the page they will by styled according to the selectors they match.