JSFiddle - React, Tailwind, and code Playground

HTML

<input type="hidden" id="search-type" name="search-type" value="commercial">
    <ul id="selType">
    <li name="search-option" id="buy" value="buy">inputBUY</li>
    <li name="search-option" id="rent" value="rent">RENT/LEASE</li>
    <li name="search-option" id="pg" value="pg">PG</li>
    </ul>
     <!-- For demo purposes only use  submit when you submitting the form-->
  <input type="button" value="Get HIdden Value" name="submit" id="btnSubmit">

JavaScript

//Assign the value
$("#selType li").click(function(){
    $("#search-type").val($(this).attr("value"));
});

//This is to show the hidden value
$("#btnSubmit").click(function(){
    alert($("#search-type").val());
});