Adding new components to Block Manager

I'm trying to add multiple components which are in my canvas into the block manager but I believe because of an id issue they're not visible properly. What exactly does the id refer to? Here's my code:

  const bm = editor.BlockManager;
  bm.add("social-sign-in-butttons-section", {
    label: "Facebook sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small" data-gjs-droppable=".fa .fa-facebook-square">' +
      '<img data-gjs-draggable=".social-sign-in-button" src="facebook.png" id="facebook" title="facebook" class="fa fa-facebook-square fa-3x ">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-facebook"
    }
  });

  bm.add("the-row-block", {
    label: "GooglePlus sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small">' +
      '<img src="google.png" id="googleplus" title="googleplus" class="fa fa-google-plus-square fa-3x ">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-google-plus-square"
    }
  });

  bm.add("the-row-block", {
    label: "LinkedIn sign-in",
    content:
      '<div class="pull-left social-sign-in-button padding-right-small">' +
      '<img src="linkedin.png" id="linkedin" title="linkedin" class="fa fa-linkedin-square fa-3x">' +
      "</img>" +
      "</div>",
    attributes: {
      class: "fa fa-linkedin-square"
    }
  });