quizDetails.blade.php (before) quizDetails.blade.php (after)
<html> <html>
   
<head> <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="viewport" content="width=device-width, initial-scale=1">
   
 <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css" />  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css" />
   <link rel="stylesheet" href="{{ URL::asset('css/custom.css') }}" />  
 <style>  <style>
   .Polaris-DataTable__Cell{    .Polaris-DataTable__Cell{
     white-space: normal;      white-space: normal;
   }    }
   
   .Polaris-DataTable__Table {    .Polaris-DataTable__Table {
     table-layout: fixed;      table-layout: fixed;
   }    }
   
   .Polaris-DataTable__Cell--numeric {    .Polaris-DataTable__Cell--numeric {
     text-align: left;      text-align: left;
   }    }
   
   .card-left {    .card-left {
     /* display: inline-block; */    
     float:left;        float:left;  
     width: 60%;      width: 60%;
   }    }
         
   .card-right {    .card-right {
     /* display: inline-block; */       width: 38%; 
     width: 36%;    
     float: right;      float: right;
     margin-top: 0px !important;      margin-top: 0px !important;
   }    }
   
   .Polaris-Page__Content:after{      .Polaris-Page__Content:after{  
     clear:both      clear:both
   }    }
   
   .table-quantity {    .table-quantity {
     text-align: center;      text-align: center;
   }    }
   
   .Polaris-Page {    .Polaris-Page {
       max-width: 155.8rem;        max-width: 155.8rem;
   }    }
   
   .quantityHead {    .quantityHead {
     text-align: center !important;      text-align: center !important;
   }    }
   
   .Polaris-Header {    .Polaris-Header {
     margin-top: 20;      margin-top: 20;
   }    }
   
   .quizIdSection {    .quizIdSection {
     border-top: none !important;      border-top: none !important;
   }    }
   
   /* .Polaris-Card__Section {    
       padding-top: 40px;    
       padding-bottom: 40px;    
   } */    
   
   .Polaris-Subheading {    .Polaris-Subheading {
     text-transform: none;      text-transform: none;
     font-size: 1.7rem;       font-size: 1.6rem; 
     font-weight: normal;      font-weight: normal;
   }    }
         
       
     .recommendation1Section p {  
       color: #6a6565;  
       float: right;  
       display: inline-block;  
     }  
   
     .recommendation2Section p {  
       color: #6a6565;  
       float: right;  
       display: inline-block;  
     }  
   
     .recommendation1Section img {  
       width: 20px;  
       /* margin-left: 10%; */  
       margin-right: 9px;  
       display: inline-block;  
       float: right;  
     }  
   
     .recommendation2Section img {  
       width: 20px;  
       /* margin-left: 17%; */  
       margin-right: 9px;  
       display: inline-block;  
       float: right;  
   
     }  
   
     .recommendation1Section h3 {  
       display: inline-block;  
     }  
   
     .recommendation2Section h3 {  
       display: inline-block;  
     }  
   
   .p-completion {    .tooltip {
             position: relative;  
     width: 50px;       display: inline-block; 
     float: left;     } 
     height: 50px;    
     border-radius: 50%;     .tooltip .tooltiptext { 
     border: solid;       visibility: hidden; 
       width: 140px;  
       background-color: #555;  
       color: #fff;  
     text-align: center;      text-align: center;
     vertical-align: middle;       border-radius: 6px; 
     /* position: absolute; */       padding: 5px; 
     padding-top: 12px;       position: absolute; 
     /* right: 17%; */       z-index: 1; 
     margin-top: -25px;       bottom: 150%; 
     /* margin-right: 15%; */       left: 50%; 
   }       margin-left: -75px; 
       opacity: 0;  
   .green {       transition: opacity 0.3s; 
     border: solid 5px green;     } 
     color: green;    
     background-color: rgba(176, 228, 113, 0.37);     .tooltip .tooltiptext::after { 
   }       content: ""; 
       position: absolute;  
   .red {       top: 100%; 
     border: solid 5px red;       left: 50%; 
     color: red;       margin-left: -5px; 
     background-color: rgba(181, 100, 100, 0.21);       border-width: 5px; 
       border-style: solid;  
       border-color: #555 transparent transparent transparent;  
     }  
   
     .tooltip:hover .tooltiptext {  
       visibility: visible;  
       opacity: 1;  
   }    }
   
       
   
 </style>  </style>
</head> </head>
   
<body> <body>
   
<div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;"> <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
 <div class="Polaris-Page">  <div class="Polaris-Page">
   <div class="Polaris-Page-Header">    <div class="Polaris-Page-Header">
     <div class="Polaris-Page-Header__MainContent">      <div class="Polaris-Page-Header__MainContent">
       <div class="Polaris-Page-Header__TitleActionMenuWrapper">        <div class="Polaris-Page-Header__TitleActionMenuWrapper">
         <div>          <div>
           <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
             <div class="Polaris-Header-Title">              <div class="Polaris-Header-Title">
               <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Quiz Details</h1>                <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Quiz Details</h1>
             </div>              </div>
   
             <div class="Polaris-Header">              <div class="Polaris-Header">
               <p><b>By <?php echo $quizDetails[0]->first_name ?></b></p>                <p><b>By <?php echo $quizDetails[0]->first_name ?></b></p>
               <p>Email : <?php echo $email ?></p>                <p>Email : <?php echo $email ?></p>
             </div>                </div>  
   
           </div>            </div>
         </div>          </div>
       </div>        </div>
     </div>      </div>
   </div>    </div>
   <div class="Polaris-Page__Content">    <div class="Polaris-Page__Content">
     <div class="Polaris-Card card-left">      <div class="Polaris-Card card-left">
       <div class="">        <div class="">
         <div class="Polaris-DataTable__Navigation"><button type="button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" disabled="" aria-label="Scroll table left one column"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">          <div class="Polaris-DataTable__Navigation"><button type="button" class="Polaris-Button Polaris-Button--disabled Polaris-Button--plain Polaris-Button--iconOnly" disabled="" aria-label="Scroll table left one column"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                     <path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path>                      <path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path>
                   </svg></span></span></span></button><button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">                    </svg></span></span></span></button><button type="button" class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Scroll table right one column"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                     <path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" fill-rule="evenodd"></path>                      <path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" fill-rule="evenodd"></path>
                   </svg></span></span></span></button></div>                    </svg></span></span></span></button></div>
         <div class="Polaris-DataTable">          <div class="Polaris-DataTable">
           <div class="Polaris-DataTable__ScrollContainer">            <div class="Polaris-DataTable__ScrollContainer">
             <table class="Polaris-DataTable__Table">              <table class="Polaris-DataTable__Table">
               <thead>                <thead>
                 <tr>                  <tr>
                   <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col"><b>Question (<?php echo count($quizDetails) ?>) </b></th>                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col"><b>Question (<?php echo count($quizDetails) ?>) </b></th>
                   <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col"><b>Answer (<?php echo count($quizDetails) ?>) </b></th>                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric" scope="col"><b>Answer (<?php echo count($quizDetails) ?>) </b></th>
                 </tr>                  </tr>
               </thead>                </thead>
               <tbody>                <tbody>
               <?php                <?php
                 if (isset($quizDetails) && !empty($quizDetails)) {                  if (isset($quizDetails) && !empty($quizDetails)) {
                   foreach ($quizDetails as $quizDetail) {  ?>                     foreach ($quizDetails as $quizDetail) {  ?> 
                     <tr class="Polaris-DataTable__TableRow">                      <tr class="Polaris-DataTable__TableRow">
                       <th class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row"><?php echo $quizDetail->question ?></th>                        <th class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row"><?php echo $quizDetail->question ?></th>
                       <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"><?php echo $quizDetail->response ?></td>                        <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric"><?php echo $quizDetail->response ?></td>
                     </tr>                      </tr>
                  <?php }                   <?php }
                 }                  }
               ?>                 ?> 
               </tbody>                </tbody>
             </table>              </table>
           </div>            </div>
         </div>          </div>
       </div>        </div>
     </div>      </div>
   
     <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">      <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
       <div class="Polaris-Card card-right">        <div class="Polaris-Card card-right">
         <div class="Polaris-Card__Header">          <div class="Polaris-Card__Header">
             <div class="Polaris-Card__SectionHeader">              <div class="Polaris-Card__SectionHeader">
               <h2 aria-label="Summary" class="Polaris-Subheading rightCardHeader" style="font-weight: bold; font-size: 2rem" > Quiz Information</h2>                <h2 aria-label="Summary" class="Polaris-Subheading rightCardHeader" style="font-weight: bold; font-size: 2rem" > Quiz Information</h2>
           </div>            </div>
         </div>          </div>
   
         <div class="Polaris-Card__Section quizIdSection" style=" padding-top: 15px; padding-bottom: 30px;" >          <div class="Polaris-Card__Section quizIdSection" style=" padding-top: 15px; padding-bottom: 30px;" >
           <div class="Polaris-Card__SectionHeader">            <div class="Polaris-Card__SectionHeader">
             <h3 aria-label="Reports" class="Polaris-Subheading" style="display: inline;">Quiz Id : </h3>              <h3 aria-label="Reports" class="Polaris-Subheading" style="display: inline;">Quiz Id : </h3>
             <p style="display: inline; padding-left: 3px;"><?php echo $sessionId ?></p>              <p style="display: inline; padding-left: 3px;"><?php echo $sessionId ?></p>
           </div>            </div>
                         
         </div>          </div>
   
         <div class="Polaris-Card__Section" style=" padding-top: 38px; padding-bottom: 30px;">          <div class="Polaris-Card__Section" style=" padding-top: 38px; padding-bottom: 30px;">
           <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">            <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">
             <h3 aria-label="Summary" class="Polaris-Subheading"> Quiz Date</h3>              <h3 aria-label="Summary" class="Polaris-Subheading"> Quiz Date</h3>
             <!-- <h1 class="Polaris-Heading">Quiz Date</h1> -->               <!-- <h1 class="Polaris-Heading">Quiz Date</h1> --> 
           </div>            </div>
           <p><?php echo date("Y-m-d", strtotime($quizDetails[0]->created_at)) ?> </p>            <p><?php echo date("Y-m-d", strtotime($quizDetails[0]->created_at)) ?> </p>
         </div>          </div>
   
         <div class="Polaris-Card__Section" style=" padding-top: 38px; padding-bottom: 30px;">          <div class="Polaris-Card__Section" style=" padding-top: 38px; padding-bottom: 30px;">
           <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">            <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">
             <h3 aria-label="Summary" class="Polaris-Subheading"> Quiz Completion Time</h3>              <h3 aria-label="Summary" class="Polaris-Subheading"> Quiz Completion Time</h3>
             <!-- <h1 class="Polaris-Heading">Quiz Date</h1> -->               <!-- <h1 class="Polaris-Heading">Quiz Date</h1> --> 
           </div>            </div>
           <p><?php echo isset($quizCompletionTime['min']) ? $quizCompletionTime['min']." min " . $quizCompletionTime['sec']." sec" : '' ?> </p>            <p><?php echo isset($quizCompletionTime['min']) ? $quizCompletionTime['min']." min " . $quizCompletionTime['sec']." sec" : '' ?> </p>
         </div>          </div>
   
         <div class="Polaris-Card__Section" style=" padding-top: 42px; padding-bottom: 49px;">          <div class="Polaris-Card__Section" style=" padding-top: 42px; padding-bottom: 49px;">
           <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">            <div class="Polaris-Card__SectionHeader" style=" width: 70%; float: left;">
             <h3 aria-label="Summary" class="Polaris-Subheading" > Complete (%)</h3>              <h3 aria-label="Summary" class="Polaris-Subheading" > Complete (%)</h3>
             <!-- <h1 class="Polaris-Heading">Quiz Date</h1> -->               <!-- <h1 class="Polaris-Heading">Quiz Date</h1> --> 
           </div>            </div>
   
         <?php if(empty($recommendation)) { ?>            <?php if(empty($recommendation)) {  
           <p class="p-completion red"><?php echo !(empty($recommendation)) ? '100' :  (count($quizDetails)/50)*100 ?> </p>    
                   if((count($quizDetails)/50)*100 <=49) { ?>  
                       <!-- <p class="p-completion red "> <?php echo (count($quizDetails)/50)*100 ?> </p> -->  
                       <div class="progress-circle red p{{(count($quizDetails)/50)*100}}">  
                         <span><?php echo (count($quizDetails)/50)*100 ?>%</span>  
                         <div class="left-half-clipper">  
                           <div class="first50-bar"></div>  
                           <div class="value-bar"></div>  
                         </div>  
                       </div>  
                   <?php }  
                     
                   if( (count($quizDetails)/50)*100 >=50  && (count($quizDetails)/50)*100 <= 89) { ?>  
                     <!-- <p class="p-completion orange"> <?php echo (count($quizDetails)/50)*100 ?> </p> -->  
                     <div class="progress-circle over50 orange p{{(count($quizDetails)/50)*100}}">  
                       <span><?php echo (count($quizDetails)/50)*100 ?>%</span>  
                       <div class="left-half-clipper">  
                         <div class="first50-bar"></div>  
                         <div class="value-bar"></div>  
                       </div>  
                     </div>  
                   <?php }  
                     
                   if ((count($quizDetails)/50)*100 >= 90) { ?>  
                     <!-- <p class="p-completion green"> <?php echo (count($quizDetails)/50)*100 ?> </p> -->  
                     <div class="progress-circle over50 green p{{(count($quizDetails)/50)*100}}">  
                       <span><?php echo (count($quizDetails)/50)*100 ?>%</span>  
                       <div class="left-half-clipper">  
                         <div class="first50-bar"></div>  
                         <div class="value-bar"></div>  
                       </div>  
                     </div>  
                    <?php }  
               
             ?>  
                         
         <?php } else { ?>           <?php } else { ?> 
           <p class="p-completion green"><?php echo !(empty($recommendation)) ? '100' :  (count($quizDetails)/50)*100 ?> </p>              <!-- <p class="p-completion green"><?php echo !(empty($recommendation)) ? '100' :  (count($quizDetails)/50)*100 ?> </p> -->  
             <div class="progress-circle over50 green p100">  
               <span> 100% </span>  
               <div class="left-half-clipper">  
                 <div class="first50-bar"></div>  
                 <div class="value-bar"></div>  
               </div>  
             </div>  
                         
         <?php } ?>           <?php } ?> 
         </div>          </div>
         <?php if(!empty($recommendation)) { ?>           <?php if(!empty($recommendation)) { ?> 
           <div class="Polaris-Card__Section">            <div class="Polaris-Card__Section">
             <div class="Polaris-Card__SectionHeader">               <div class="Polaris-Card__SectionHeader recommendation1Section"> 
               <h3 aria-label="Summary" class="Polaris-Subheading"> Recommendation Result (Logged in link)</h3>                <h3 aria-label="Summary" class="Polaris-Subheading"> Recommendation Result (Logged in link)</h3>
               <!-- <h1 class="Polaris-Heading">Quiz Date</h1> -->                <!-- <div class="tooltip">  onmouseout="outFunc1()" --> 
                  <!-- <p id="pLink1" onclick="copyToClipboard('#recommendationLink11')" > Copy Link</p>    -->  
                 <!-- </div> -->  
                 <div class="tooltip" style="float: right;" >  
                   <p id="pLink1" onclick="copyToClipboard1('#recommendationLink11')" onmouseout="outFunc1()">  
                     <span class="tooltiptext" id="myTooltip1">Copy to clipboard</span>  
                     Copy Link  
                   </p>  
                   </div>  
   
   
                 <img  onclick="copyToClipboard1('#recommendationLink11')" src="https://img.icons8.com/metro/26/000000/copy-link.png">  
             </div>              </div>
             <a class="Polaris-Link btn" href="https://nurish-usd.myshopify.com/pages/recommendations?id={{$sessionId}}" target="_blank" data-polaris-unstyled="true">              <a id="recommendationLink1" class="Polaris-Link btn" href="https://nurish-usd-dev.myshopify.com/pages/recommendations?id={{$sessionId}}" target="_blank" data-polaris-unstyled="true">
               https://nurish-usd.myshopify.com/pages/recommendations?id={{$sessionId}}                 https://nurish-usd-dev.myshopify.com/pages/recommendations?id={{$sessionId}} 
             </a>              </a>
               <input type='hidden' value='https://nurish-usd-dev.myshopify.com/pages/recommendations?id={{$sessionId}}' id="recommendationLink11"></input>  
   
           </div>            </div>
   
           <div class="Polaris-Card__Section">            <div class="Polaris-Card__Section">
             <div class="Polaris-Card__SectionHeader">               <div class="Polaris-Card__SectionHeader recommendation2Section"> 
               <h3 aria-label="Summary" class="Polaris-Subheading"> Recommendation Result (Public link)</h3>                <h3 aria-label="Summary" class="Polaris-Subheading"> Recommendation Result (Public link)</h3>
               <!-- <h1 class="Polaris-Heading">Quiz Date</h1> -->                 <!-- <div class="tooltip"> onmouseout="outFunc2()"--> 
                   <!-- <p id="pLink2" onclick="copyToClipboard('#recommendationLink22')" >Copy Link</p> -->  
                 <!-- </div> -->  
   
                 <div class="tooltip" style="float: right;">  
                   <p id="pLink2" onclick="copyToClipboard2('#recommendationLink22')" onmouseout="outFunc2()">  
                     <span class="tooltiptext" id="myTooltip2">Copy to clipboard</span>  
                     Copy Link  
                   </p>  
                   </div>  
   
                 <img onclick="copyToClipboard2('#recommendationLink22')" src="https://img.icons8.com/metro/26/000000/copy-link.png">  
             </div>              </div>
             <a class="Polaris-Link btn" href="https://nurish-usd.myshopify.com/pages/my-recommendations?quizId={{$sessionId}}" target="_blank" data-polaris-unstyled="true">              <a id="recommendationLink2" class="Polaris-Link btn" href="https://nurish-usd-dev.myshopify.com/pages/my-recommendations?quizId={{$sessionId}}" target="_blank" data-polaris-unstyled="true">
               https://nurish-usd.myshopify.com/pages/my-recommendations?quizId={{$sessionId}}                 https://nurish-usd-dev.myshopify.com/pages/my-recommendations?quizId={{$sessionId}} 
             </a>              </a>
               <input type='hidden' value='https://nurish-usd-dev.myshopify.com/pages/my-recommendations?quizId={{$sessionId}}' id="recommendationLink22"></input>  
           </div>            </div>
         <?php } ?>           <?php } ?> 
         <div class="Polaris-Card__Section">          <div class="Polaris-Card__Section">
           <div class="Polaris-Card__SectionHeader">            <div class="Polaris-Card__SectionHeader">
             <h1 aria-label="Summary" class="Polaris-Subheading">Recommendation Products</h1>              <h1 aria-label="Summary" class="Polaris-Subheading">Recommendation Products</h1>
           </div>            </div>
   
         <?php if(!empty($recommendation)) { ?>           <?php if(!empty($recommendation)) { ?> 
         <table class="Polaris-DataTable__Table">          <table class="Polaris-DataTable__Table">
           <thead>            <thead>
             <tr>              <tr>
               <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header"                 <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" 
                 scope="col">Product Name</th>                  scope="col">Product Name</th>
               <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric quantityHead"                 <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--header Polaris-DataTable__Cell--numeric quantityHead" 
                 scope="col">Qty</th>                  scope="col">Qty</th>
             </tr>              </tr>
           </thead>            </thead>
           <tbody>            <tbody>
               <?php foreach($recommendation as $recDetails) { ?>                 <?php foreach($recommendation as $recDetails) { ?> 
                <tr>                     <tr>    
                 <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">                  <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td">
                   <?php echo $recDetails->Name ?>                     <?php echo $recDetails->Name ?> 
                 </td>                  </td>
                 <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td table-quantity">                  <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric td table-quantity">
                   <?php echo $recDetails->Quantity ?>                     <?php echo $recDetails->Quantity ?> 
                 </td>                  </td>
               </tr>                </tr>
              <?php } ?>                <?php } ?> 
           </tbody>            </tbody>
           </table>            </table>
           <?php } else{ ?>             <?php } else{ ?> 
               <div></div>                <div></div>
           <?php } ?>             <?php } ?> 
   
         </div>          </div>
       </div>        </div>
     </div>      </div>
   
   </div>    </div>
 </div>  </div>
</div> </div>
   
</body> </body>
   
</html> </html>
   
   
<script src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script> <script src="{{ URL::asset('js/jquery-3.1.1.min.js') }}"></script>
   
   
  <script>  
   
   
  function copyToClipboard1(element) {  
   var $temp = $("<input>");  
   $("body").append($temp);  
   $temp.val($(element).val()).select();  
   document.execCommand("copy");  
   $temp.remove();  
   
   var tooltip = document.getElementById("myTooltip1");  
   tooltip.innerHTML = "Copied";  
  }  
   
  function copyToClipboard2(element) {  
   var $temp = $("<input>");  
   $("body").append($temp);  
   $temp.val($(element).val()).select();  
   document.execCommand("copy");  
   $temp.remove();  
   
   var tooltip = document.getElementById("myTooltip2");  
   tooltip.innerHTML = "Copied";  
  }  
   
  function outFunc1() {  
   var tooltip = document.getElementById("myTooltip1");  
   tooltip.innerHTML = "Copy to clipboard";  
  }  
   
  function outFunc2() {  
   var tooltip = document.getElementById("myTooltip2");  
   tooltip.innerHTML = "Copy to clipboard";  
  }  
   
  </script>