JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<input id="filter" type="text" placeholder="Player Name / Type"> <input id="filter1" type="text" placeholder="Country"> 
<input id="purse" type="text" placeholder="Total Amount">
<div id="header">
  <div class="header">
    <p>ID</p>
    <p>Player</p>
    <p>Country</p>
   <p>
   Cost
   </p>
  </div>
</div>

<div id="results">
  <div class="results">
    <p>1</p>
    <p>Virat Kohli</p>
    <p>India</p>
  <p>
    <input name=value class="pvalue" type=number min=0 max=15 step=0.1 placeholder="0.1" > Crores
    
  </p>

  </div>
  <div class="results">
    <p>2</p>
    <p>Ms D</p>
    <p>India</p>
    <p>
    <input name=value class="pvalue" type=number min=0 max=15 step=0.1 placeholder="0.1" > Crores
    
  </p>
  </div>
  
   <div class="results">
    <p>3</p>
    <p>ABD</p>
    <p>South Africa</p>
    <p>
    <input name=value class="pvalue" type=number min=0 max=15 step=0.1 placeholder="0.1" > Crores
    
  </p>
  </div>
  
  <div class="results">
    <p>4</p>
    <p>Virat Singh</p>
    <p>India</p>
    <p>
    <input name=value class="pvalue" type=number min=0 max=15 step=0.1 placeholder="0.1" > Crores
    
  </p>
  </div>
</div>

CSS

.header {
  display: flex;
}

.header p {
  flex: 1;
  font-weight: bold;
}

.results {
  display: flex;
}

.results p {
  flex: 1;
}

JavaScript

// Total Calculation 
 $(document).on("change", ".pvalue", function() {
 //console.log($(this).val())
    var sum = 0;
    $("input[class *= 'pvalue']").each(function(){
        sum += +$(this).val();
    });
    $("#purse").val(sum);
});

    
    
    $("#filter").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = $(this).val(),
        count = 0;

      // Loop through the comment list
      $('#results div').each(function() {


        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).show();
          count++;
        }

      });

    });


    $("#filter1").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = $(this).val(),
        count = 0;

      // Loop through the comment list
      $('#results div').each(function() {


        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).show();
          count++;
        }

      });

    });