Why is Semantic-Ui Popup not Functioning? - php

Question

I am working on a Laravel project. I included a SemanticUI popup but it doesn't work and I get a javascript error:
Popup: The target or popup you specified does not exist on the page
I used a view for the popup code called popup.blade.php and I included it in my Laravel index page.
Popup:
<div class="ui fluid popup bottom left transition hidden" style="top: 551.634px; left: 0.994324px; bottom: auto; right: auto; width: 614.659px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.grid-cell').popup({
inline: true,
hoverable: true,
popup: '.special.popup',
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
});
Index:
<div class="grid-calendar">
<div class="row calendar-week-header">
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Monday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Tuesday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Wednesday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Thursday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Friday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Saturday</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span class="hd">Sunday</span></div>
</div>
</div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell">
<div>
<div><span></span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span></span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span></span></div>
</div>
</div>
<div class="col-xs-1 grid-cell " style="background-color: #dddada;">
<div>
<div><span>1</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>2</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>3</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>4</span></div>
</div>
</div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell">
<div>
<div><span>5</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>6</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>7</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>8</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>9</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>10</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>11</span></div>
</div>
</div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell">
<div>
<div><span>12</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>13</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>14</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>15</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>16</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>17</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>18</span></div>
</div>
</div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell">
<div>
<div><span>19</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>20</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>21</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>22</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>23</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>24</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>25</span></div>
</div>
</div>
</div>
<div class="row calendar-week">
<div class="col-xs-1 grid-cell">
<div>
<div><span>26</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>27</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>28</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>29</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>30</span></div>
</div>
</div>
<div class="col-xs-1 grid-cell">
<div>
<div><span>31</span></div>
</div>
</div><span></span></div>
</div>