Clone <div> and change id of img upload

So out of curiosity and teaching myself how to code I've decided to make a Twitter mimic. I've been doing decently well until now -- I'm trying to make it so you can hit the "clone tweet" button and it will clone the base of the tweet, but allow you to change the icon to whatever you like. But, every time I try and upload anything it only changes the very first icon, the "mat" aka make a tweet one. I have no clue how to get this to work properly and would love some help figuring it out.

Here is the Codepen I'm using: https://codepen.io/laurenlola/pen/GRLPOyJ?editors=0010

let c = 0

function IDgenerate() {
  return c++
}
$("#clickme").on("click", function() {
  var cn = IDgenerate();

  let clone = $("#cloneme").clone()
  clone.css("display", "inline-block")
  clone.find('#setID').attr("id", cn)
  clone.find("#cancel").attr("id", "cancel" + cn)
  clone.find("#cancel" + cn).on("click", function() {
    clone.css("display", "none")
  })
  $("#bucket").append(clone)
})

//imageupload
function showMyImage(fileInput) {
  var files = fileInput.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    console.log(file.name);
    var imageType = /image.*/;
    if (!file.type.match(imageType)) {
      continue;
    }
    var img = document.getElementById("thumbnil");
    img.file = file;
    var reader = new FileReader();
    reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(img);
    reader.readAsDataURL(file);
    thumbnil.style.display = 'block';

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="matweet">
  <div class="avatar-wrapper">
    <div class="upload-button">
      <input type='file' id="upload" onchange="showMyImage(this)" class="fa fa-arrow-circle-up" aria-hidden="true" />
      <img id="thumbnil" src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" style="display: block;width: 50px;height: 50px;margin: 0 0 -5px -5px" /></div>
  </div>
  <input type="text" placeholder="What is happening?!"></div>

<div class="maticons">
  <i class="fa-regular fa-image" style="color: #1d9bf0;"></i>&emsp;&nbsp;
  <i class="fa-regular fa-box" style="color: #1d9bf0;"></i>&emsp;&nbsp;
  <i class="fa-solid fa-list" style="color: #1d9bf0;"></i>&emsp;&nbsp;
  <i class="fa-regular fa-smile" style="color: #1d9bf0;"></i>&emsp;&nbsp;
  <i class="fa-regular fa-calendar" style="color: #1d9bf0;"></i>&emsp;&nbsp;
  <i class="fa-solid fa-location-dot" style="color: #1d9bf0;"></i>

  <button class="button button1">
                        Post
                        </button>
</div>

</div>
<!---- Avatar upload end-->
<div id="cloneme">
  <div class="tweet">
    <div class="twticon">
      <div class="avatar">
        <div class="upload-button">
          <input type='file' id="upload" onchange="showMyImage(this)" class="fa fa-arrow-circle-up" aria-hidden="true" />
          <img class="thumbnil" id="setID" src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" alt="logo" style="display: block;width: 50px;height: 50px;margin: -5px" /></div>
      </div>
    </div>
    <b><div class="username" contentEditable="true">Usernames</b>&emsp;<text style="color:gray">@username</text></div><br>
  <div class="tweetst" contentEditable="true"> Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
    <p>
  </div>
  <div class="tweeticons">

    <i class="fa-solid fa-comment" style="color:gray">&thinsp;</i><b div style="color:gray" contentEditable="true">24K</b>&emsp;&emsp;&emsp;
    <i class="fa-solid fa-undo" style="color:gray">&thinsp;</i><b div style="color:gray" contentEditable="true">754K</b></i>&emsp;&emsp;&emsp;
    <i class="fa-solid fa-heart" style="color:gray">&thinsp;</i><b div style="color:gray" contentEditable="true">9.1K</b></i>&emsp;&emsp;&emsp;
    <i class="fa-solid fa-bar-chart" style="color:gray">&thinsp;</i><b div style="color:gray" contentEditable="true" maxlength="4">257K</b> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;&thinsp;&thinsp;
    <i class="fa-solid fa-bookmark" style="color:gray">&thinsp;</i>
  </div>
</div>
</div>

<div id="bucket" class="container-fluid">

</div>

<button type="button" class="btn btn-success" id="clickme">Clone Tweet</button>

And again, thanks so much for any help.

I've tried a couple different ways to clone and change the id but I'm just not sure how to connect it all together to change properly when hitting the clone button.

Solution

The problem is in your JS showMyImage(fileInput) function.

This line:

var img=document.getElementById("thumbnil");

It's accessing the element with id thumbnil which is only the icon located at the left side of "What is happening?!".

If you want to change the icon in each tweet, replace it with:

var img= fileInput.parentNode.querySelector(".thumbnil");

The icon in each tweet has thumbnil class which can be used to select that element to replace the src image. The fileInput.parentNode was used so it will only select the class thumbnil next to the upload button/icon (^).

Note: If you want the icon (left of "What is happening!?") to change too, add class thumbnil to it.

In your HTML file, add the class="thumbnil":

<img id="thumbnil" class="thumbnil"  src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" style="display: block;width: 50px;height: 50px;margin: 0 0 -5px -5px"/></div>

Note also that if you change the icon of your base tweet (above Clone Tweet button), it will also be the icon of the clone.