SharePoint Dashboard Design Icons and Links are Fetched from SharePoint List based on Active Status Button

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="/Dashboard/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {
display: none;
}
span#DeltaPlaceHolderPageTitleInTitleArea {
display: none;
} */ //optional
.row-space {
padding: 20px 100px 20px 100px;
}
.img-align {
margin: 0 auto;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 10px;
}
.txt-align {
text-align: center;
font-size: 14px;
margin-top: 10px;
}
.bg {
background-color: #f5f5f5;
margin: 10px 0 10px 0;
}
@media only screen and (max-width: 500px) {
.row-space {
padding: 20px 20px 20px 20px;
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {

var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Icons')/Items?$select=Url,Image,Active,ID&$orderby= Display asc&$filter=(Active eq 1)";
$.ajax({
url: oDataUrl,
dataType: "json",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: GetSuccessMethod,
error: onError
});
function GetSuccessMethod(data, request) {
var contents = "";
//var contentss = "";
contents += "<div class='bg'>";
contents += "<div class='row row-space'>";
$.each(data.d.results, function(key, val) {
if (val.Title === 'My Task') {
contents += "<div class='col-xs-6 col-md-3' style='display:none'>";
} else {
contents += "<div class='col-xs-6 col-md-3'>";
}
contents += "<img src='" + val.Image.Url + "' class='img-responsive img-align' alt='Responsive image'>";
contents += "<p class='txt-align'><a href='" + val.Url.Url + "'class='txt-align'>" + val.Title + "</a></p>";
contents += "</div>";
// contents += "<img id='image' onclick='RedirectURL('"+val.Url.Url+"'); src='"+val.Image.Url+"'></img>";
//contentss +="<p> <a href='"+val.Url.Url+"' id='hyperlink'>"+val.Title+"</a></p>";
});
contents += "</div>";
contents += "</div>";
$("div[id='container']").append(contents);
isMember();
//$("div[class='col-xs-6 col-md-3']").css('margin-bottom','35px');
}
function onError(error) {}
function isMember() {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('NonTaskGroup')/Users?$filter=Id eq " + _spPageContextInfo.userId,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
if (data.d.results[0] != undefined) {
$("a[class='txt-align']:contains('My Task')").parent().parent().hide();
} else {
$("a[class='txt-align']:contains('My Task')").parent().parent().show();
}
}
});
}
});
</script>
<div id="container"> </div>