Как задать show & hide клонам блока так, чтобы событие выполнялось индивидуально?

Question

Егорк Орнилов @edkiimrgnl

человек с невидимыми талантами.

JavaScript

Как задать show & hide клонам блока так, чтобы событие выполнялось индивидуально?

Не могу догнать, как сделать show & hide блока на каждом клоне индивидуально.

$(document).ready(function() {
    var i = 1;

    function addTask() {
        var tasker = $('.add-task').parent();
        var taskAdd = $('#taskItem').clone().addClass('gee_' + i).removeAttr('id').appendTo('.column-left').show();
        taskAdd.removeClass('task-add');

        $('.empty-list span').replaceWith();

        taskAdd.find('.header span').text(tasker.find('#taskName').val());
        taskAdd.find('.descript').text(tasker.find('#taskDesk').val());
        taskAdd.removeAttr('id');

        
       
        i++;
    }

    $('#taskBut').on('click', function() {
        addTask();
        $(this).closest('form').find('input[type=text], textarea').val('');

        return false;
    });

    $('.column-left').on('click', '.btn-close', function() {
        $(this).parents('.item').remove();
    });

    $('.column-left').on('click', '.btn-show', function() {
        var desk = $('.descript');
        if(desk.css('display') == 'block') {
            desk.hide();
        } else {
            desk.show();
        }
    });
});

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Дела</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main class="fixed-container">
        <section class="column-left">
            <h2>Список дел:</h2>
            <div class="empty-list">
                <span>Список пуст...</span>
            </div>
            <div class="item task-add" id="taskItem">
                <div class="header">
                    <span></span>
                    <button class="btn-close">X</button>
                    <button class="btn-show">V</button>
                </div>
                <div class="descript"></div>
            </div>
        </section>
        <section class="column-right">
            <h2>Добавить новое дело</h2>
            <form class="add-task">
                <input id="taskName" name="taskName" type="text" placeholder="*Название">
                <textarea id="taskDesk" name="taskDesk" placeholder="*Описание"></textarea>
                <button id="taskBut">Добавить дело</button>
            </form>
        </section>
    </main>
<script src="jquery-3.5.1.min.js"></script>
<script src="script.js"></script>    
</body>
</html>

html, body {
	margin: 0;
	padding: 0;
	min-width: 1440px;
    font-family: "Arial";
    background-color: #f5f5f5;
}

h2 {
    font-variant: small-caps;
}

.fixed-container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

.column-right {
   float: right;
   margin-top: 114px;
   position: relative;
}

    .add-task {
        display: block;
        width: 470px;
        height: 500px;
        background: #fff;        
    }

    #taskName {
        margin: 51px 40px;
        width: 390px;
        height: 45px;
        background-color: #fcfcfc;
        border: 1px solid #ebebeb;
        border-radius: 0;
        outline: 0;
        font-size: 16pt;
    }
    
    #taskDesk {
        margin: 0 40px;
        width: 390px;
        height: 230px;
        background-color: #fcfcfc;
        border: 1px solid #ebebeb;
        border-radius: 0;
        outline: 0;
        font-size: 16pt;
        resize: none;
    }

    .add-task input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        font-size: 16px;
    }

    #taskBut {
        margin: 30px 206px 0 40px;
        width: 224px;
        height: 55px;
        border: none;
        background-color: #2174fd;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        outline: none;
    }

.column-left {
    float: left;
    margin-top: 114px;
    position: relative;
    }

    .item {
        width: 470px;
        background-color: #fff;
        display: none;
        margin-top: 20px;
    }

        .header {
            height: 50px;
            border: 1px solid #;
        }

        .descript {
            height: 86px;
            font-size: 14px;
            color: #8993ad;
            padding: 10px 20px;
        }
    
        .item .btn-close {
            margin: 18px 0;
            font-weight: bold;
            background-color: #fff;
            color: red;
            border-style: hidden;   
        }

        .item .btn-show {
            float: right;
            margin: 20px 20px;
            font-weight: bold;
            background-color: #fff;
            border-style: hidden; 
        }

        .item span {
            font-weight: bold;
            margin-left: 20px;
        }