JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/* @var $imageName */
/* @var $imageWidth */
/* @var $imageHeight */

?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
    <div class="p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
        <div class="container d-flex flex-column flex-md-row align-items-center">
            <nav class="my-2 my-md-0 mr-md-3">
                <a class="p-2 text-dark" href="/">Главная</a>
                <a class="p-2 text-dark" href="/image-history">История</a>
            </nav>
        </div>
    </div>
</header>
<main role="main" class="flex-shrink-0">
    <div class="container">
            <div class="mb-3">
                <!-- <img id="user-image" style="width: 500px;" src="uploads/<?php echo $imageName;?>" class="img-thumbnail" alt="..."> -->
            </div>
            <div class="card mb-3" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Ширина картинки: <?php echo $imageWidth;?></li>
                    <li class="list-group-item">Высота картинки: <?php echo $imageHeight;?></li>
                </ul>
            </div>
        <div id="errors-block">

        </div>
        <form id="drawing-form" action="" method="post" class="mb-3" enctype="multipart/form-data">
            <div id="figures-container">

                <div class="form-group card">
                    <div class="card-header">
                        Выберите фигуру:
                    </div>
         ...

JavaScript

const prototypes = document.querySelector("#figure-prototypes");
const figureListPrototype = prototypes.firstElementChild;
const figuresContainer = document.querySelector("#figures-container");

const addFigureBtn = document.querySelector("#add-figure-btn");
const deleteFigureBtn = document.querySelector("#delete-figure-btn");

const drawingForm = document.querySelector("#drawing-form");

let image = document.querySelector("#user-image");

let errorsContainer = document.querySelector("#errors-block");

document.addEventListener("DOMContentLoaded", function() {
    deleteFigureBtn.disabled = true;
});

drawingForm.addEventListener('submit',async function (event) {
    event.preventDefault();

    const formData = new FormData(event.target);

    let response = await fetch('/draw', {
        method : "POST",
        body: formData,
    });

    if (response.status === 400) {
        let responseObj = await response.json();
        displayErrors(responseObj);
    }

    if (response.ok) {
        let responseObj = await response.json();
        resetDrawingForm();
        updateImage(image, `/uploads/${responseObj.imageName}`);
    }
});

function displayErrors(errors) {
    let error = document.createElement("div");
    error.classList.add("alert");
    error.classList.add("alert-danger");
    errorsContainer.innerHTML = "";
    for (let key in errors) {
        error.innerHTML = errors[key];
        errorsContainer.append(error.cloneNode(true));
    }
}

function resetDrawingForm() {
    errorsContainer.innerHTML = "";
    drawingForm.reset();
    while (figuresContainer.childElementCount !== 1) {
        figuresContainer.removeChild(figuresContainer.lastElementChild);
    }
    figuresContainer.firstElementChild.querySelector('[data-figure-inputs-container]').innerHTML = "";
    deleteFigureBtn.disabled = true;
}

function updateImage(image, src)
{
    image.src = `${src}?` + new Date().getTime();
}

figuresContainer.addEventListener('change', function (event) {
...