Remove attributes when cloning an element

I have a div with multiple videos that when hovered on the video triggers a popover that contains the video that was hovered on. The problem I’m having is I’m cloning the video in the main div and appending it to the popover but when I clone the video it also clones the attributes of the video tag. What I want is when cloning the video before appending to popover removing the attribute autoplay and controls so that the video in the popover won’t play when hovered on the video. Is this possible? How can I remove the attribute before appending it to popover? Note: The main video tag needs the autoplay and controls attribute because I want it to start on load and also have controls.

I tried: $('video).attr("autoplay", "") and $('video).attr("autoplay", "false")

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><video src="" controls autoplay/></div>')

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#" + currnetInfoBarElementView).children()

      $('.infoBarPopoverContent').empty().append('<div class="infoBarElementContentView"></div>')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      return $('.infoBarPopoverContent').html();

function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(".popover").on("mouseleave", function() {
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {

button {
  position: absolute;
  top: 0%;
  left: 0%;

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;

.infoBar .imgWrap video {
  height: 100%;
  cursor: pointer;

.infoBarPopoverContent {
  display: none;

.popover .popover-body {
  overflow-x: auto;
<script src=""></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button onclick='appendImg()'>Click to append img</button>

<div class="infoBar" id="infoBar">
  <div class="imgWrap" id='test1'><video src="" controls autoplay /></div>
  <div class="imgWrap" id='test2'><video src="" controls autoplay /></div>
  <div class="imgWrap" id='test3'><video src="" controls autoplay /></div>

<div class="infoBarPopoverContent"></div>