JSFiddle - React, Tailwind, and code Playground

HTML

<div id="step3_p4">
    <h3>3.4. Ange antalet önskade urtagningar</h3>
    <span class="notches">
                            <p>Diskho</p>
                            <input type="number" name="diskho" min="0" max="" placeholder="0" value="0">	
                            </span>
    <span class="notches">
                            <p>Spishäll</p>	
                            <input type="number" name="spishall" min="0" max="" placeholder="0" value="0">
                            </span>
    <span class="notches">
                            <p>Blandare</p>	
                            <input type="number" name="blandare" min="0" max="" placeholder="0" value="0">
                            </span>
    <span class="notches">
                            <p>Annat</p>
                            <input type="checkbox" name="showannat" id="showannat">
                            </span>

    <textarea name="annat" id="annat" placeholder="Beskriv fritt önskad håltagning."></textarea>
    <div id="show_notches">

      <div id="show_diskho"></div>
      <div id="show_spishall"></div>
    </div>
    </div>
 
    <button name="clickme">
    Click me
    </button>
    
        <input class="diskhoval"ype="text" value="" name="diskhoVal" placeholder ="Display the console.log value here for diskho"/>
     <input class="diskhoval"ype="text" value="" name="spashallVal" placeholder ="Display the console.log value here from spashall"/>

CSS

#show_notches {
  overflow: auto;
  float: left;
}

#spishall {}

#diskho {}

#step3_p4 {
  width: 350px;
  overflow: auto;
}

.notches {
  float: left;
  width: 96px;
}

.notches:nth-child(5) {
  width: 40px;
  text-align: center;
}

.notches input[type="number"] {
  width: 60px;
  padding: 10px;
  text-align: center;
}

.notches p {
  margin-bottom: 5px;
}

#annat,
#profiles {
  max-width: 307px;
  width: 307px;
  height: 50px;
  padding: 10px;
  display: none;
}

.diskhoval {
  margin-top: 50px;
  width: 350px;

  }
  
button {
  margin-top: 20px;
}

JavaScript

$(document).ready(function() {
  $('input[name="diskho"]').bind('keyup mouseup', function() {
    /*  alert("changed");    */
    if (this.value == '0') {
      $('#diskho').hide();
      $('#show_diskho').hide();
    } else {
      var diskho = this.value;
      var diskho_display = "";
      var d;
      for (d = 0; d < diskho; d++) {
        diskho_display += "<div class='plan_select' id='diskho'>\n<h3 id='tile_name'>Välj montage (Diskho)</h3>\n<div class='styled-select'>\n<div class='styled-select'><select name='diskho'>\n<option value='Infälld'>Infälld</option>\n<option value='Övermonterad'>Övermonterad</option>\n<option value='Under-upp monterad'>Under-upp monterad</option>\n<option value='Undermonterad'>Undermonterad</option>\n</select></div>\n</div>\n</div>";

      }
      $('#show_diskho').show();
      document.getElementById("show_diskho").innerHTML = diskho_display;
    }
  });

  $('input[name="spishall"]').bind('keyup mouseup', function() {
    /*  alert("changed");    */
    if (this.value == '0') {
      $('#spishall').hide();
      $('#show_spishall').hide();
    } else {
      var spishall = this.value;
      var spishall_display = "";
      var s;
      for (s = 0; s < spishall; s++) {
        spishall_display += "<div class='plan_select' id='spishall'>\n<h3 id='tile_name'>Välj montage (Spishäll) </h3>\n<div class='styled-select'>\n<div class='styled-select'>\n<select name='spishall'>\n<option value='Övermonterad'>Övermonterad</option>\n<option value='Infälld'>Infälld</option>\n</select>\n</div>\n</div>\n</div>";
      }
      $('#show_spishall').show();
      document.getElementById("show_spishall").innerHTML = spishall_display;
    }
  });
  
$("button").click(function(){
    var dishkoMap = {};
    $("select[name='diskho'] > option:selected").each(function () {
        var value = this.value;
        if (dishkoMap[value]) { // if value already exists then increase it by 1
            dishkoMap[value] += 1;
        } else {
           ...