JSFiddle - React, Tailwind, and code Playground

HTML

<a id="download-project" class="button download isDisabled" href="#" title="Download the project and delete from host forever"><span class="material-icons web-icon">cloud_download</span> Downlaod Project</a>


<form class="editor-form" action="./index.php?act=download" method="post">
<input type="hidden" name="project_temp" value="50f990fab9903dcd655de07cf776fcc51b613f35.tgd" />
<div class="default-shader"><div class="shader-header">
<div class="shader-type">Object Shader</div>
<label class="shader-label">Douglas Fir Tree (Mature - Pop Variant).tgo / <span class="blue">bark 1 color</span></label></div>
<div class="shader-setting">
<div class="shader-attribute">
<strong class="node">Diffuse Colour</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/diffuse_colour" placeholder="0.5" />
</div>
<div class="shader-attribute">
<strong class="node">Colour Image</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/colour_image" placeholder="Bark.png" />
</div>
<div class="shader-attribute">
<strong class="node">Translucency</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/translucency" placeholder="0" />
</div>
<div class="shader-attribute">
<strong class="node">Translucency Image</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/translucency_image" placeholder="" />
</div>
<div class="shader-attribute">
<strong class="node">Luminosity</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/luminosity" placeholder="0" />
</div>
<div class="shader-attribute">
<strong class="node">Luminosity Image</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/luminosity_image" placeholder="" />
</div>
<div class="shader-attribute">
<strong class="node">Reflectivity</strong>
<input name="Douglas Fir Tree (Mature - Pop Variant).tgo/bark 1 color/reflectivity" placeholder="0" />
</div>
<div class="shader-attribute">
<strong...

CSS

.button { display: inline; cursor: pointer; background-color: #2F71A3; text-align: left; color: white; padding: 8px; margin: 20px auto 20px auto; font-size: 22px; border: none; border-radius: 5px; -webkit-box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.25); -moz-box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.25); box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.25); transition: all 0.2s ease-in-out; }
.isDisabled { color: #ccc; background-color: #888; cursor: not-allowed; opacity: 0.5; }

JavaScript

$("input").each(function() {
                        $(this).keyup(function() {
                            console.log("keyup event fired");
                            $("input").each(function() {
                                if ( $(this).val() !== "" ) {
                                    empty = false;
                                } else {
                                		empty = true; 
                                }
                            });
                            if ( empty ) {
                                $("#download-project").addClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                });
                            } else {
                                $("#download-project").removeClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                    $(".editor-form").submit();
                                });
                            }
                        });
                    });