Jquery 附加容器时按id隐藏每个元素

我动态添加了以下元素：

var card =
              `<hr>
            <h3>
          <p class="text-center id="i" >${title}</p>
          </h3>
          <video class="col-12 ml-auto col-12 mr-auto" id="mp4Id" controls="controls">
          <source src=${mp4} type="video/mp4">?????????
          </video>
            <img class="col-12 ml-auto col-12 mr-auto" id= "imgId" src=${images}>
            <div class="span4 collapse-group">
              <div class="text-center">
                <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check &raquo;</a></p>
              </div>
              <div class="collapse">
                <div class="card card-body">
                ${text}
                </div>
              </div>
            </div>`

            $('.container').append(card);

但是，当我想为id调用我的

视频类
id=“mp4Id”
时，它不起作用：

$(document).find("#mp4Id").each(function() {
          $(this)
            .hide()
        });

如何解决此问题？
因为id是唯一的，不应重复。因此，使用
.find（）
没有意义。
如果元素的id是唯一的，则可以使用以下代码-：

$('#mp4Id').hide();

或

不能有多个元素具有相同的
id
。将
mp4
元素改为使用类。还有
imgId
元素，尽管它们与当前问题无关
$('#mp4Id').hide();

$('#mp4Id').addClass('hidden');