JSFiddle - React, Tailwind, and code Playground

HTML

<ol start="4" style="width:auto;" class="container_16" >
      <li class="grid_8">What solutions are you looking for?</li></ol>
      <select id="capability" name="capability[]" style="background-color: #ffffff;" onchange="selection(this)">
        <option value="locMgm">Security</option>
        <option value="securityTrc">HSE</option>
        <option value="ivms">Transport and Logistics</option>
        <option value="satelliteComm">Maritime</option>
        <option value="all">Defence</option>
        <option value="othersolution">Other</option>
    </select>
    <label style="font-size:16px" for="value">Value:</label>
    <input type="text" id="othervalue" disabled="disabled" />

<button type="button" id="getVal">getVal</button>
<div id="console"></div>

JavaScript

var ov = $("#othervalue");

$("#capability").change(function() {
    ov.prop("disabled", true).val("");
    if ($(this).val() == "othersolution") {
        ov.prop("disabled", false);
    }
});

$("#getVal").click(function() {
    var cap = 'blah', othertb = ov.val();
    var message = "What solutions are you looking for? ";        
    cap = othertb ? othertb : cap;
    message += cap;
    $('#console').html("<br/><br/>" + message);
});