JSFiddle - React, Tailwind, and code Playground

HTML

<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
  <input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
  <input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
    <button class="remove">Remove</button>
</div>
    </div>

JavaScript

function updateClonedInput(index, element) {
		$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
		$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
    	$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
		$(element).find(">:first-child").attr("value", "");
    	$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
        displayRemove();
	}

function displayRemove() {
    if($('.clonedInput').length === 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
	}
}
displayRemove();

	$(document).on("click", ".clone", function(e){
		e.preventDefault();
    	var cloneIndex = $(".clonedInput").length + 1;
        var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
    	updateClonedInput(cloneIndex, new_Input);    
    });
    $(document).on("click", ".remove", function(e){
		e.preventDefault();
    	$(this).parents(".clonedInput").remove();
    	$(".clonedInput").each( function (cloneIndex, clonedElement) {
        	updateClonedInput(cloneIndex + 1, clonedElement);
		})
	});