Link not prepending to all images

Question

I have this code below that consist of a Tab with some data and a button. Whenever the user clicks on the button it will prepend this link https://cors-anywhere.herokuapp.com/ into my img src.

The problem is i'm not sure why it is only prepending to the first image only and not all of it. All of my image id is the same im not sure why this is happening.

This is the function

function clickme() {
    $('#imageID').attr('src', function(index, src) {
      return 'https://cors-anywhere.herokuapp.com/' + src;
    });
  }

Any help would be greatly appreaciated thanks.

var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["hobbies"]: ["football", "swimming", "dancing"],
  ["gender"]: "Male",
  ["person-desc"]: "
Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky 
boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]: ["camping", "sleeping", "eating"],
  ["gender"]: "Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};

personArr.push(person, person2);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var gender = document.createElement('h4');
  var desc = document.createElement('p');
  var hobb = document.createElement('div');
  var age = document.createElement('age');
  var logo = document.createElement('div');
  var show = document.createElement('div');

  var hobbies = '';
  $.each(person['hobbies'], function(index) {
    hobbies += ('' + person['hobbies'][index] + '');
  });
  hobb.className = "hide";
  logo.className = "thumb";
  age.className = "square";
  hobb.innerHTML = hobbies;
  age.innerHTML = `${person['age']} Age`;
  name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = `${person['person-desc']}`;
  show.innerHTML = `Show more`;
  gender.innerHTML = `Gender: ${person['gender']}`;
  logo.innerHTML = ``;

  frag.appendChild(name);
  frag.appendChild(gender);
  frag.appendChild(age);
  frag.appendChild(logo);
  frag.appendChild(desc);
  frag.appendChild(hobb);
  frag.appendChild(show);

});
parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
  $('.hide').hide();

  $("a").click(function() {
    $('.hide').toggle();

  });

});

function clickme() {
  $('#imageID').attr('src', function(index, src) {
    return 'https://cors-anywhere.herokuapp.com/' + src;
  });
}

body {
  font-family: Arial;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

h4 {
  margin: 0;
}

.square {
  width: 50px;
  height: 45px;
  font-size: 18px;
  color: #81C784;
  text-align: center;
  background: transparent;
  display: inline-block;
  border: 1px solid #81C784;
}

.thumb {
  float: left;
  border: 1px solid #90A4AE;
  margin-right: 10px;
}

Link not prepending to all images

Answers (1)

Related Questions