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 coddepen im using:
https://codepen.io/laurenlola/pen/GRLPOyJ?editors=0010
javascript
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';
}
}
HTML
<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> 
<i class="fa-regular fa-box" style="color: #1d9bf0;"></i> 
<i class="fa-solid fa-list" style="color: #1d9bf0;"></i> 
<i class="fa-regular fa-smile" style="color: #1d9bf0;"></i> 
<i class="fa-regular fa-calendar" style="color: #1d9bf0;"></i> 
<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> <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"> </i><b div style="color:gray" contentEditable="true" >24K</b>   
<i class="fa-solid fa-undo" style="color:gray"> </i><b div style="color:gray" contentEditable="true">754K</b></i>   
<i class="fa-solid fa-heart" style="color:gray"> </i><b div style="color:gray" contentEditable="true">9.1K</b></i>   
<i class="fa-solid fa-bar-chart" style="color:gray"> </i><b div style="color:gray" contentEditable="true" maxlength="4">257K</b>          
<i class="fa-solid fa-bookmark" style="color:gray"> </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 soooo much for any help.
I’ve tried a couple different ways to cline and change the id but im just not sure how to connect it all together to change properly when hitting the clone button