JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="questionssel">
    <li class="question date">
        <div class="title">
            <input type="text" name="title" placeholder="Title">
        </div>
        <div class="description">
            <input type="date" name="date">
        </div>
        with the .not selector
    </li>
</ul>

<ul class="questionsnosel">
    <li class="question date">
        <div class="title">
            <input type="text" name="title" placeholder="Title">
        </div>
        <div class="description">
            <input type="date" name="date" />
        </div>
        without the .not selector
    </li>
</ul>

CSS

.question {
     width: 100%;
     background-image: -webkit-gradient(linear, left bottom, left top, from(#E4E8ED), color-stop(1, #F5F7FA));
    background-image: -moz-linear-gradient(90deg, #d9dfe6 0%, #d5dce3 48.9%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #BFBFBF;
    border-radius: 3px;
}

.selected {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#98CBFA), color-stop(1, #E4E8FA));
    background-image: -moz-linear-gradient(90deg, #98CBFA 0%, #E4E8FA 48.9%);
}

JavaScript

$("ul.questionssel li").on('click', function() {
    
    //$(".inspector").slideToggle();
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    } else {
        $(this).addClass("selected");
    }
});

$("ul.questionsnosel li").on('click', function(){
    //$(".inspector").slideToggle();
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    } else {
        $(this).addClass("selected");
    }
});

$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
    e.stopPropagation();
});