Show/hide text doesn't work when targeting link within div

jQuery('[rel="innerRows"]').on("mouseover", function (){

    var spanId = jQuery(this).attr('spanid');
    jQuery('[rel="innerSpans"]').hide();
    jQuery('#edit_'+spanId).show();
 });

 $("#foo,#foo1,#foo2,#foo3").show();

 $(document).ready(function (){
    $("#state").change(function() {
       $("#foo,#foo1,#foo2,#foo3").toggle($(this).val() == "twoChoices");
    });
 });

:id => "Identifier_ModelName_Id"

o/p => "Identifier_Question_15" 

var getInput = document.querySelector('.search-form')
var screenWidth;
var getWidth;
var bodyDisplay;
var display;

window.onresize = function(event) {
    screenWidth = event.target.outerWidth;
};

function getCssProperty(elmId, property){
        var elem = document.getElementById(elmId);
        return window.getComputedStyle(elem,null).getPropertyValue(property);
}

function showInput(event) {
    event.stopPropagation();
    console.log(event.target.className);
    if(event.target.className == "search-field form-fluid") return;
    if(screenWidth === undefined){  //screenWidth is undefined but not null
     screenWidth = document.documentElement.clientWidth;
    }
    console.log(screenWidth ,"b")
    if(display === undefined && screenWidth > 500){ //display is undefined but not null
        getInput.style.display = 'inline-block';
        document.querySelector('.search-field').focus();
    display = true; //setting display true as a flag 
    } else {
    display=undefined; // making display undefined so that again on click if loop will execute
        getInput.style.display = 'none';
    }
}

document.getElementsByTagName('body')[0].onclick=function(event){
  console.log("body")
    display= true; // if true else loop in showInput will execute

  showInput(event);
};

private void button2_Click(object sender, EventArgs e)
{
    this.Hide();
    sa.Show();
}