JSFiddle - React, Tailwind, and code Playground

HTML

<div id="details" class="miSections relative">
            <div class="sectionHeader relative">Details<button id="detailButton" class="newButton" type="button">Add Another Detail</button></div>
                <table id="detailsTable" class="infoTable">                   
                   <tr>
                        <td><input type="text" name="detDate_1" id="detDate_1" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td>
                    </tr>                    
                </table>

        </div>

CSS

.infoTable
{
    text-align: center;
    width:100%;
}
.defaultText
{
    color: #a1a1a1;
    font-style: italic;
}

JavaScript

$(document).ready(function () { 
            $('.textarea').on('focus', function () {
                //using .on('focus','.textarea',function() doesn't work
                if ($(this).val() == $(this).attr('title')) {
                    $(this).removeClass('defaultText');
                    $(this).val("");
                }
            });

            $('.textarea').on('blur',  function () {
                if ($(this).val() == "" || $(this).val() == $(this).attr('title')) {
                    $(this).addClass('defaultText');
                    $(this).val($(this)[0].title);
                } else { $(this).removeClass('defaultText'); }
            });

            //fire the blur events to populate the inputs with default values
            blurIt();

            $('#detailButton').on('click', function () {
                $('#detailsTable tr:last-child').after('><tr><td><input type="text" name="detDate_2" id="detDate_2" class="textarea defaultText" autocomplete="off" title="Detail Date"/></td></tr>');
                 
                blurIt();
                countIt();
            });
        });
function blurIt(){
    $('.textarea').blur();
}
function countIt(){
    var inputs = $('.textarea').length;
    console.log(inputs);
}